Hot Scripts Forums - View Single Post

harish · #1 (**permalink**) 04-21-09, 02:23 AM

this is the source code of dropdown menu in css. I want to make it more attractive can you suggest me any more only using css..

Code:

<html>
<head>
<style type="text/css">
ul {
   margin: 0;
   padding: 0;
   list-style: none;
}
ul li {
   position: relative;
   float: left;
        width: 100px;

}
li ul {
   position: absolute;
   top: 30px;
   display: none;
}
ul li a {
   display: block;
   text-decoration: none;
   line-height: 20px;
   color: #000;
   padding: 5px;
   background: #CC0;
   margin: 0 2px;
}

ul li a:hover { background: #66F; }
li:hover ul, li.over ul { display: block; }
</style>
<body>
<ul id="nav">
   <li><a href="">Home</a></li>
    <li><a href="">Web</a>
      <ul>
        <li><a href="">Browser</a></li>
        <li><a href="">Search</a></li>
      </ul>
    </li>
    <li><a href="">Monkey</a>
      <ul>
        <li><a href="">Eating Banana</a></li>
        <li><a href="">Throwing Poop</a></li>
      </ul>
    </li>
    <li><a href="">Contact</a>
      <ul>
        <li><a href="">Via Web</a></li>
        <li><a href="">Via Phone</a></li>
        <li><a href="">Via tin can and string</a></li>
      </ul>
    </li>
   
</ul>

</body>
</html>