Page Widget How to - Create dropdown and hover

Question

We would like to know how to create dropdown and hover.
Answer


<!--from  ww w  .j a  v a  2s  .  co  m-->
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.menu {
  height: 29px;
  width: 100%;
}

.menu ul {
  width: auto;
  list-style-type: none;
}

.menu ul li {
  position: relative;
  display: inline;
  float: left;
  width: auto;
  border-right: 2px solid purple;
  margin-left: 10px;
  line-height: 12px;
}

.menu ul li:last-child {
  border: none;
}

.menu ul li a {
  display: block;
  padding: 3px;
  color: #854288;
  text-decoration: none;
  font-size: 20px;
  font-weight: strong;
  padding-right: 25px;
}

.menu ul li a:hover, .active {
  color: #788d35
}

.menu ul li ul {
  display: none;
}

.menu ul li:hover>ul {
  display: block;
  position: absolute;
  top: 23px;
  float: left;
  padding-left: 20px;
  text-align: left;
  margin-left: -30px;
}

.menu ul li ul li {
  position: relative;
  min-width: 135px;
  max-width: 1350px;
  width: 100%;
  border: none;
}

.menu ul li ul li a {
  padding: 3px;
  margin-left: 1px;
  border-style: none;
}
</style>
</head>
<body>
  <section class="menu">
    <ul>
      <li><a class="active" href="#"> PORTFOLIO </a>
        <ul>
          <li><a href="#"> A </a></li>
          <li><a href="#"> B </a></li>
          <li><a href="#"> C </a></li>
          <li><a href="#"> D </a></li>
        </ul></li>
      <li><a href="#"> STORE </a>
        <ul>
          <li><a href="#"> A </a></li>
          <li><a href="#"> B </a></li>
        </ul></li>
      <li><a href="#"> CONTACT </a></li>
      <li><a href="#"> ABOUT </a></li>
    </ul>
  </section>
</body>
</html>
The code above is rendered as follows: