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

Stylish drop down menu list with HTML CSS

About Asad

Asad Niazi is Software Engineer , Programmer, Web Developer and a young mentor of BloggersTown and PProgramming. Asad Love to writes about Technology, Programming, Blogging and make money online.