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.

jLix · #9 (**permalink**) 04-25-09, 06:45 AM

Quote:

Originally Posted by harish

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.

Sure, in modern browsers it can, but have you tested your code in IE6? I can't at the moment, cause I don't have it installed, but your code works with li:hover, which is not supported by IE6. This browser only supports :hover on the a element. There's only one CSS-only dropdown that I know of (http://www.cssplay.co.uk/menus/dd_valid.html by Stu Nicholls), but it serves IE6 and older a different, invalid HTML structure.

You also have defined li.over in your CSS, but you never use it in your HTML. I guess you copied code from another CSS dropdown in which the over class is set by JavaScript.

If you can develop a true CSS-only dropdown that works even in IE6 and uses only valid code, that would be big news! The code you posted here is not that.

harish · #10 (**permalink**) 04-27-09, 01:41 AM

http://www.cssplay.co.uk/menus/dd_valid.html
jlix thanks for this link. In this link I found the new way of design css dropdown menu.