Drop Down Menu with CSS & xHTML only (no Javascript)

  • Posted: 9:45 e pasdites
  • |
  • Author: Mizake
  • |
  • Filed under: CSS, Gadget, HTML

It really is easy. Basically you have your ul with li's within and then ul and li's within that:



HTML Code:

<ul id="menu">
<li>A lovely Tab
<ul><li>sub tab #1</li>

<li>sub tab #2</li>
</ul>
</li>
<li>A lovely Tab#2
<ul><li>sub tab #21</li>

<li>sub tab #22</li>
</ul>
</li>

OK, that's pretty simple. Now you need to hide the extra ul's, make the primary tabs form horizontally. So we add this to the css:




Code:


ul { /*this applies to all ul tags*/
margin: 0; padding: 0; /*stops them moving around too much*/}
ul#menu li { list-style: none; float: left; padding: 5px; }
ul#menu li ul { display: none; /*hides the submenu clever bit now:*/
position: absolute; top: auto; left: auto; /*makes it appear below the item*/ }

/*now we need to show it on hover*/
ul#menu li:hover ul { display: block; }

/*now we style the sub menus li's*/
ul#menu li ul li { display: block; float: none; /*makes them appear on top of each other*/ }

Want proof it works or an example, the exact code is on this page:

http://kerplunc.com/projects/_css/drop_down_menu.php

[WARNING: do not copy that page directly, it has no <body> or <head> or <html> set up properly, it is just for testing]




Enjoy...


0 people have left comments

Commentors on this Post-