Tip: you can modify some code before running
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Dropdown menu</title> <style type="text/css"> <!-- * {margin:0; padding:0;} ul{list-style:none; } #nav {float:left; margin-top:3em; } #nav li {float:left; position:relative; } #nav li a {display:block;float:left; font-weight:bold;background:url(nav_down.gif) no-repeat right 50%; padding:1em 2em; } #nav li a:hover{background:#f6f6f6 url(nav_down.gif) no-repeat right 50%; } #nav li ul{display:none; position:absolute; left:0;top:3em; } #nav li ul li{clear:both; } #nav li:hover ul {display: block} #nav li.over ul {display: block} #nav li ul li a{border: #ccc 1px solid; border-bottom: #ccc 0px solid;width: 10em; height: 2em; line-height:2em; padding:0 1em; background-image:none; background:#f6f6f6; font-size:90%;font-weight:normal;} #nav li ul li a.lasta{border-bottom:1px solid #ccc; } #nav li ul li a:hover{text-decoration:underline; background:#fff; } --> </style> <script type="text/javascript" language="javascript" > <!-- startList = function() {if (document.all&&document.getElementById) {navRoot = document.getElementById("nav");for (i=0; i<navRoot.childNodes.length; i++) {node = navRoot.childNodes[i];if (node.nodeName=="LI") {node.onmouseover=function() {this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } }}window.onload=startList; --> </script></head><body><ul id="nav"> <li>For families<ul> <li>Display</li> <li>Software and accessories</li> <li>Service</li> <li>Laptop</li> <li>Desktop</li> <li>Server</li> </ul> </li> <li>For office<ul> <li>Display</li> <li>Software and accessories</li> <li>Service</li> <li>View all products</li> </ul> </li> <li>For data centers<ul> <li>Server</li> <li>Display</li> <li>Service</li> <li>Network Device</li> </ul> </li></ul></body></html>
Tip: you can modify some code before running
