Page Widget How to - Create dropup menu hover

Question

We would like to know how to create dropup menu hover.
Answer


<html>
<head>
<style>
div,ul,li {<!--from w  w w  .  j a  va  2  s  .  co  m-->
  padding: 0;
  margin: 0;
  list-style: none;
}

#menu {
  margin-top: 100px;
  float: left;
  line-height: 10px;
  left: 200px;
}

#menu a {
  display: block;
  text-decoration: none;
  color: red;
}

#menu a:hover {
  background: pink;
}

#menu ul li ul li a:hover {
  background: #EEE;
  padding-left: 9px;
  border-left: solid 1px #000;
}

#menu ul li ul li {
  width: 140px;
  border: none;
  color: #EEE;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 3px;
  padding-right: 3px;
  background: #B0BD97;
  z-index: 1;
}

#menu ul li ul li a {
  font: 11px arial;
  font-weight: normal;
  font-variant: small-caps;
  padding-top: 3px;
  padding-bottom: 3px;
}

#menu ul li {
  float: left;
  width: 146px;
  font-weight: bold;
  border-top: solid 1px #283923;
  border-bottom: solid 1px #283923;
  background: #979E71;
}

#menu ul li a {
  font-weight: bold;
  padding: 15px 10px;
}

#menu li {
  position: relative;
  float: left;
}

#menu ul li ul,#menu:hover ul li ul,#menu:hover ul li:hover ul li ul {
  display: none;
  list-style-type: none;
  width: 140px;
}

#menu:hover ul,#menu:hover ul li:hover ul,#menu:hover ul li:hover ul li:hover ul
  {
  display: block;
}

#menu:hover ul li:hover ul li:hover ul {
  position: absolute;
  margin-left: 145px;
  margin-top: -22px;
  font: 10px;
}

#menu:hover ul li:hover ul {
  position: absolute;
  margin-top: 1px;
  font: 10px;
}

#menu>ul>li:hover>ul {
  bottom: 100%;
  border-bottom: 1px solid transparent
}
</style>
</head>

<body>
  <div id="menu">
    <ul>
      <li><center>
          <a href="#">Home</a>
        </center>
        <ul>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Disclaimer</a></li>
        </ul></li>
    </ul>
  </div>
  ?
</body>
</html>
The code above is rendered as follows: