Try it Live

<!DOCTYPE html>
<html>
 <head>
  <style>
    ul {
      list-style: none; 
      padding:0;
      margin:0;
    }
	
    ul li {
      display: block;
      float: left; 
    }
	
	li ul {
      display: none;
    }
	
    ul li a {
	  display: block;
      font-family:helvetica;
      font-size:20px;
      background-color:deepskyblue;
      padding: 10px;
      text-decoration: none;
      color: black;
      width:100px; 
      border: 2px solid black;
      border-radius:5%;
    }
	
    ul li a:hover {
      background:deepskyblue;
      color:white;
    }
	
    li:hover ul {
      display: block; 
      position: absolute; 
    }
	
    li:hover li {
      float: none; 
    }
	
    li:hover a {
      background-color:pink; 
      color:black;
    }
	
    li:hover li a:hover {
      width:100px;
    }
  </style>
 </head>
 <body>
   <h2>Example for CSS Horizontal drop-down menu</h2><br>
  <ul>
    <li>
      <a href="#">Fruits</a>
      <ul>
        <li><a href="#">Apple</a></li>
        <li><a href="#">Mango</a></li>
        <li><a href="#">Papaya</a></li>
        <li><a href="#">Pinea</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Flowers</a>
      <ul>
        <li><a href="#">Rose</a></li>
        <li><a href="#">Lily</a></li>
        <li><a href="#">Marigold</a></li>
        <li><a href="#">Sunflower</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Vegetables</a>
      <ul>
        <li><a href="#">Carrot</a></li>
        <li><a href="#">Potato</a></li>
        <li><a href="#">Onion</a></li>
        <li><a href="#">Brinjal</a></li>
      </ul>
    </li>
  </ul>
 </body>
</html>

​x
 
<!DOCTYPE html>
<html>
 <head>
  <style>
    ul {
      list-style: none; 
      padding:0;
      margin:0;
    }
    
    ul li {
      display: block;
      float: left; 
    }
    
    li ul {
      display: none;
    }
    
    ul li a {
      display: block;
      font-family:helvetica;
      font-size:20px;
      background-color:deepskyblue;
      padding: 10px;
      text-decoration: none;
      color: black;
      width:100px; 
      border: 2px solid black;
      border-radius:5%;
    }
    
    ul li a:hover {
      background:deepskyblue;
      color:white;
    }
    
    li:hover ul {
      display: block; 
      position: absolute; 
    }
    
    li:hover li {
      float: none; 
    }
    
    li:hover a {
      background-color:pink; 
      color:black;
    }
    
    li:hover li a:hover {
      width:100px;
    }
  </style>
 </head>
 <body>
   <h2>Example for CSS Horizontal drop-down menu</h2><br>
  <ul>
    <li>
      <a href="#">Fruits</a>
      <ul>
        <li><a href="#">Apple</a></li>
        <li><a href="#">Mango</a></li>
        <li><a href="#">Papaya</a></li>
        <li><a href="#">Pinea</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Flowers</a>
      <ul>
        <li><a href="#">Rose</a></li>
        <li><a href="#">Lily</a></li>
        <li><a href="#">Marigold</a></li>
        <li><a href="#">Sunflower</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Vegetables</a>
      <ul>
        <li><a href="#">Carrot</a></li>
        <li><a href="#">Potato</a></li>
        <li><a href="#">Onion</a></li>
        <li><a href="#">Brinjal</a></li>
      </ul>
    </li>
  </ul>
 </body>
</html>
​