Using simple top-down CSS menus.
1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd"> 4 <html xmlns:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml"> 5 <head> 6 <link rel="stylesheet" type="text/css" href="rollover.css"/> 7 </head> 8 <body> 9 <div id="nav"> 10 <ul> 11 <li><a href="menu1/">Menu 1</a> 12 <ul> 13 <li><a href="menu1/sub1.html">Submenu 1.1</a></li> 14 <li><a href="menu1/sub2.html">Submenu 1.2</a></li> 15 </ul> 16 </li> 17 <li><a href="menu2/">Menu 2</a> 18 <ul> 19 <li><a href="menu2/sub1.html">Submenu 2.1</a></li> 20 <li><a href="menu2/sub2.html">Submenu 2.2</a></li> 21 </ul> 22 </li> 23 </ul> 24 </div> 25 </body> 26 </html> 27
1 2 #nav ul { 3 padding: 1em; 4 margin: 0; 5 background: #fff; 6 } 7 8 #nav ul ul { 9 display: none; 10 } 11 12 #nav ul li { 13 list-style-type: none; 14 position: relative; 15 margin: 0; 16 display: inline; 17 } 18 19 #nav ul li:hover > ul { 20 display:block; 21 position:absolute; 22 top: 100%; 23 left: 0%; 24 background-image: url(/images/fix_ie_hover.gif); /* IE7 bugfix */ 25 }
Here's what the CSS menu [twitxr.com] looks like in the web page.