Page Widget How to - Learn the techniques of create Drop Down Menu








Question

We would like to know how to learn the techniques of create Drop Down Menu.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.link ul {<!--  w w  w.  j  ava2  s  .c o  m-->
  background: #EEE;
}

.link ul li {
  float: left;
  position: relative;
  padding: 5px;
}

.link ul ul {
  display: none;
  position: absolute;
  left: auto;
}

.link ul li:hover ul {
  display: block;
}
</style>
</head>
<body>
  <div class="link">
    <ul>
      <li><a href="">test 1</a></li>
      <li><a class="test" href="">test 2</a>
        <ul>
          <li><a href="#">test1 1</li>
          <li><a href="#">test1 2</li>
          <li><a href="#">test1 3</li>
        </ul></li>
      <li><a href="">test 3</a></li>
      <li><a href="">test 4</a></li>
    </ul>
  </div>
</body>
</html>

The code above is rendered as follows: