LinkBack URL
About LinkBacks
Basic dropdown menu using a little javascript
Code:[FONT=Arial Black][SIZE=2] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Horizontal Drop Down Menus</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!--[if lt IE 7]> <script type="text/javascript"> sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" over"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" over\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); </script> <![endif]--> <style type="text/css"> body { font: x-small Verdana, Arial, Helvetica, sans-serif; } * html body{ font-size:xx-small; f\ont-size:x-small; } ul#nav, ul#nav ul { margin: 0; padding: 0; list-style: none; } ul#nav li { position: relative; float: left; width:149px; } #nav li ul { position: absolute; margin-left: -999em; /* hide menu from view */ top: auto; left:0; } /* Styles for Menu Items */ ul#nav li a { display: block; text-decoration: none; color: #777; background: #ffffcc; /* IE6 Bug */ padding: 5px; border: 1px solid #ccc; margin-bottom:-1px; min-height:0; } /* commented backslash mac hiding hack \*/ * html ul#nav li a {height:1%; position:relative;} /* end hack */ /* this sets all hovered lists to red */ #nav li:hover a,#nav li.over a, #nav li:hover li a:hover,#nav li.over li a:hover { color: #fff; background-color: red;} /* set dropdown to default */ #nav li:hover li a,#nav li.over li a { color: #777; background-color: #ffffcc; } #nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */ #nav li:hover ul,#nav li.over ul {margin-left:0; } /* show menu*/ </style> </head> <body> <ul id="nav"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a> <ul> <li><a href="#">Sub link</a></li> <li><a href="#">Sub link</a></li> <li><a href="#">Sub link</a></li> </ul> </li> <li><a href="#">Link 3</a> <ul> <li><a href="#">Sub link</a></li> <li><a href="#">Sub link</a></li> <li><a href="#">Sub link</a></li> <li><a href="#">Sub link</a></li> <li><a href="#">Sub link</a></li> </ul> </li> <li><a href="#">Longer Link 4</a> <ul> <li><a href="#">Sub link</a></li> <li><a href="#">Sub link</a></li> <li><a href="#">Sub link</a></li> <li><a href="#">Sub link</a></li> </ul> </li> </ul> </body> </html>[/SIZE][/FONT]
Reply With Quote
