dropdown menu in css

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>

wswebtech · #2 (**permalink**) 04-21-09, 05:48 AM

If you want to make some more attractive then go for below links

just search in google with "Css Drop down menu", you will get many results.

harish · #3 (**permalink**) 04-22-09, 09:10 AM

i have found that on google but on the google we found the use of javascript also But I want to use only css.

RichyRich38 · #4 (**permalink**) 04-22-09, 11:00 AM

Have a look here, you might see something you like

http://www.smashingmagazine.com/2007...ern-solutions/

harish · #5 (**permalink**) 04-23-09, 02:24 AM

Quote:

Originally Posted by RichyRich38

Have a look here, you might see something you like

http://www.smashingmagazine.com/2007...ern-solutions/

Thanks for that site. But i have never found the source code on that site.

RichyRich38 · #6 (**permalink**) 04-23-09, 07:40 AM

I know, it will not give the code for each nav, but will link you to there site, where you can view the source code for your self, borrow bits you like.. Happy days..

jLix · #7 (**permalink**) 04-23-09, 11:36 PM

If you want the drop down menu to work in IE6 you'll need JavaScript anyway, well unless you're willing to use invalid markup (tables in links etc.). Google for "suckerfish dropdown". And with a bit of tweaking the Javascript, you can make the menu accessible for keyboard navigation as well.

harish · #8 (**permalink**) 04-24-09, 05:31 AM

Quote:

Originally Posted by RichyRich38

I know, it will not give the code for each nav, but will link you to there site, where you can view the source code for your self, borrow bits you like.. Happy days..

I think you have not checked the site for each nav. I have checked all. there are no any source code.

Quote:

Originally Posted by jLix

If you want the drop down menu to work in IE6 you'll need JavaScript anyway, well unless you're willing to use invalid markup (tables in links etc.). Google for "suckerfish dropdown". And with a bit of tweaking the Javascript, you can make the menu accessible for keyboard navigation as well.

you are wrong because drop down menu can be created with the use of css only also. the code posted by me is dropdown menu in css. But want it more attractive. but only using css.

PHPLicengine · #9 (**permalink**) 05-02-09, 03:08 AM

in dynamicdrives.com you may find some JS scripts who creates drop downmenu with css.

dropdown menu in css

Internet Services

Website Development

Tech Hardware