Pure CSS Horizontal Menu with 1 dropdown

[doaner6]

I am looking to create a simple to customize, pure CSS horizontal menu with 1 section that has a nested list that drops down. Currently I have the horizontal menu which is fine, but I cannot seem to create a dropdown inside of this menu - any suggestions?Here is the CSS I have

#vdividermenu ul{margin:0;padding:5px;font-famly:Arial;font-weight:bold;font-size:11px;width:670px;border:0;background-color:#ff0000;}* html #vdividermenu ul{ /*IE only rule, reduce menu width*/width:679px;}#vdividermenu ul li{display:inline;}#vdividermenu ul li a{color:#fff;padding:5px 12px;text-decoration:none;background-color:#ff0000;}#vdividermenu ul li a:visited{color:#fff;}#vdividermenu ul li a:hover{color:#fff;background-color:#cc0000;}

Here is the HTML:

<div id="vdividermenu"><ul><li><a href="u">List1</a></li><li><a href="u">List2</a></li><li><a href="u">List3</a></li><li><a href="u">List4</a></li><li><a href="u">List5</a></li><li><a href="u">List6</a></li><li><a href="u">List7</a></li></ul></div>

[Natechs]

You will need to learn JavaScript or use Photoshop/Flash to do it. Use the W3Schools JavaScript tutorial to learn JavaScript. Another alternative is to use one of these three: 12 3 All three work very well and are simple to use. 2 would be the one to use for a horizontal menu.

[danm68]

I won't go into details here, but you can make a drop-down menu using only CSS. You don't need javascript.You need to use nested lists, and (very) basically (X)HTML code is:

<ul><li>First Item</li><li>Second Item    <ul>        <li>First Nested Item</li>        <li>Second Nested Item</li>    </ul></li><li>Third Item</li></ul>

and CSS is:

li ul{display :none;}li:hover > ul{display: block;}

Thats it. If you want a better explanation or a demo then go to http://meyerweb.com/eric/css/edge/menus/demo.htmlwhich is the site I got this off. The hardest part for me was fiddling with the positioning code...you'll see what I mean.Good luck with your menu.ps. Forgot to mention, I think this only works in firefox and/or opera, haven't tested it. But as usual IE stuffs up... But thats ok because the link still works, so instead of getting a nice dropdown, they just have to click more.... and yeah the example is a vertical list, but it should be easy enough to change into a horizontal one. something like ul {display: inline;}...

[rzea]

...I think this only works in firefox and/or opera, haven't tested it. But as usual IE stuffs up...

Then doaner6, you shouldn't use this menu. If you're going to create a menu it should work on all major browsers, and, of course, IE is the most used browser today and it will be for a loooong time.Now, using Javascript for your drop downs is perfectly fine, 99.9x% of the people's browsers have Javascript enabled. To put this into perspective, there are more people with Javascript enabled than with the Flash Player installed.Nonetheless, if you can get a drop down menu to work without Javascript, but that works in all browsers, then you are in a very good spot usability-wise.Here are plenty of links with the information you need to construct your drop down menu.

• Drop down menus with CSS and NO Javascript.
• http://www.noupe.com/css/multilevel-drop-d...-tutorials.html
• http://www.alvit.de/css-showcase/css-navig...es-showcase.php
• http://qrayg.com/learn/code/cssmenus/

Hope this helps.

[Synook]

According to the W3School's statistics, 95% of people visiting the W3Schools site had JavaScript enabled in the period of January 2008. However, as long the menu degrades gracefully with JS off it is not a fatal problem.Interestingly, according to Adobe 98.8% of users have the Flash Player, but I don't know what that says about the respective technologies... hmm...