Page Widget How to - Create two level dropdown menu

Question

We would like to know how to create two level dropdown menu.
Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
<!--from w w w  . j  a v a2s  . c  o  m-->
#cssmenu {
  clear: both;
  float: left;
  margin: 0;
  padding: 0;
  width: 100%;
  position: relative;
}

div ul {
  float: right;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  right: 50%;
}

div ul:after {
  content: "";
  clear: both;
  display: block;
}

div ul li {
  float: left;
  margin: 0 0 0 1px;
  padding: 0;
  position: relative;
  left: 50%;
  top: 1px;
}

div ul li:hover {
  background: #4b545f;
}

div ul li:hover a {
  color: #fff;
}

div ul li a {
  display: block;
  margin: 0;
  padding: .6em .5em .4em;
  font-size: 1em;
  line-height: 1em;
  background: #ddd;
  color: #444;
  text-decoration: none;
}

div ul ul {
  display: none;
  position: absolute;
  top: 2em;
  left: 0;
  right: auto;
  width: 10em;
}

div ul li:hover>ul {
  display: block;
}

div ul ul li {
  left: auto;
  margin: 0;
  clear: left;
  width: 100%;
}

div ul ul li a {
  padding: 15px 40px;
  color: #fff;
}

div ul ul li a:hover {
  background: #4b545f;
}

div ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}
</style>
</head>
<body>
  <div id='cssmenu'>
    <ul>
      <li class='active'><a href=''>Home</a></li>
      <li class='has-sub '><a href=''>Products</a>
        <ul>
          <li class='has-sub '><a href=''>Men</a>
            <ul>
              <li><a href=''>D</a></li>
              <li><a href=''>E</a></li>
              <li><a href=''>F</a></li>
            </ul></li>
          <li class='has-sub '><a href=''>Women</a>
            <ul>
              <li><a href=''>A</a></li>
              <li><a href=''>B</a></li>
              <li><a href=''>C</a></li>
            </ul></li>
        </ul></li>
      <li><a href=''>About</a></li>
      <li><a href=''>Contact</a></li>
    </ul>
  </div>
</body>
</html>
The code above is rendered as follows: