Try it Live

<!DOCTYPE html>
<html>
  <head>
    <style>
     * {
	  padding:0;
      margin:0;
      box-sizing:border-box;
     }
	 
     nav {
      display:block;
      margin:0 auto;
      text-align:center;
      height:100px;
      width:100%;
     }
	 
     nav a {
	  display:block;
      text-decoration:none;
      color:white;
     }
	 
     nav a:hover {
      color:white;
      background:hotpink;
	 }
	  
     ul {
	  list-style-type:none;
     } 
	 
      ul li {
	  float:left;
      width:150px;
      height:50px;
      line-height:50px;
      background:black;
     }
	 
     ul ul li {
      position:relative;
      display:none;
	 }
	 
     ul li:hover ul li {
      display:block;
	 }
	 
     ul ul ul {
      display:none;
	 }
	 
     ul ul li:hover ul {
      display:block;
      position:absolute;
      width:150px;
      height:50px;
      left:150px;
      top:0;
     }
    </style>
  </head>
  <body>
    <h2>Example for CSS drop-down with sub menu</h2><br>
    <nav>
      <ul>
        <li>
          <a href="#">Clothing</a>
          <ul>
            <li><a href="#">Tops</a></li>
            <li><a href="#">Skirts</a></li>
            <li><a href="#">Kurtis</a></li>
            <li><a href="#">Jeans</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Shoes</a>
          <ul>
            <li><a href="#">Wedges</a></li>
            <li><a href="#">Heels</a></li>
            <li><a href="#">Ankle boots</a></li>
            <li><a href="#">Lace ups</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Bags</a>
          <ul>
            <li><a href="#">Sling</a></li>
            <li> <a href="#">Clutch</a></li>
            <li><a href="#">Tote</a></li>
            <li><a href="#">Wallet</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Watches</a>
          <ul>
            <li><a href="#">Guess</a></li>
            <li><a href="#">Fastrack</a></li>
            <li> <a href="#">Fossil</a></li>
            <li><a href="#">Rado</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  </body>
</html>

​x
 
<!DOCTYPE html>
<html>
  <head>
    <style>
     * {
      padding:0;
      margin:0;
      box-sizing:border-box;
     }
     
     nav {
      display:block;
      margin:0 auto;
      text-align:center;
      height:100px;
      width:100%;
     }
     
     nav a {
      display:block;
      text-decoration:none;
      color:white;
     }
     
     nav a:hover {
      color:white;
      background:hotpink;
     }
      
     ul {
      list-style-type:none;
     } 
     
      ul li {
      float:left;
      width:150px;
      height:50px;
      line-height:50px;
      background:black;
     }
     
     ul ul li {
      position:relative;
      display:none;
     }
     
     ul li:hover ul li {
      display:block;
     }
     
     ul ul ul {
      display:none;
     }
     
     ul ul li:hover ul {
      display:block;
      position:absolute;
      width:150px;
      height:50px;
      left:150px;
      top:0;
     }
    </style>
  </head>
  <body>
    <h2>Example for CSS drop-down with sub menu</h2><br>
    <nav>
      <ul>
        <li>
          <a href="#">Clothing</a>
          <ul>
            <li><a href="#">Tops</a></li>
            <li><a href="#">Skirts</a></li>
            <li><a href="#">Kurtis</a></li>
            <li><a href="#">Jeans</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Shoes</a>
          <ul>
            <li><a href="#">Wedges</a></li>
            <li><a href="#">Heels</a></li>
            <li><a href="#">Ankle boots</a></li>
            <li><a href="#">Lace ups</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Bags</a>
          <ul>
            <li><a href="#">Sling</a></li>
            <li> <a href="#">Clutch</a></li>
            <li><a href="#">Tote</a></li>
            <li><a href="#">Wallet</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Watches</a>
          <ul>
            <li><a href="#">Guess</a></li>
            <li><a href="#">Fastrack</a></li>
            <li> <a href="#">Fossil</a></li>
            <li><a href="#">Rado</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  </body>
</html>
​