Stylish Drop Down Menu List With HTML CSS

This is simple web programming (html,css) code to generate stylish menu for web pages. The stylish menu is generated with inline CSS.

Source Code 

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
  ul {list-style: none;padding: 0px;margin: 0px;}
  ul li {display: block;position: relative;float: left;border:1px solid #000}
  li ul {display: none;}
  ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
           white-space: nowrap;color: #fff;}
  ul li a:hover {background: #f00;}
  li:hover ul {display: block; position: absolute;}
  li:hover li {float: none;}
  li:hover a {background: #f00;}
  li:hover li a:hover {background: #000;}
  #drop-nav li ul li {border-top: 0px;}
</style>
</head>
<body>

<ul id="drop-nav">
  <li><a href="#">About US</a></li>
  <li><a href="#">Fruits</a>
    <ul>
      <li><a href="#">Mango</a></li>
      <li><a href="#">Apple</a></li>
      <li><a href="#">Orange</a></li>
    </ul>
  </li>
  <li><a href="#">Countries</a>
    <ul>
      <li><a href="#">Pakistan</a></li>
      <li><a href="#">China</a></li>
    </ul>
  </li>
  <li><a href="#">Contact</a>
  </li>
</ul>
</body>
</html>

Output of the Program