<style type="text/css"> body { font:12px/25px 宋体; color:#333; background:#d4e8f3; } ul,li { margin:0; padding:0; } ul { list-style:none; } ul li { float:left; position:relative; } ul li a { display:block; 80px; color:#fff; padding:0 10px; text-decoration:none; } ul li a:link,ul li a:visited { background:#639c31; } ul li a:hover,ul li a:active { background:#ff9c00; } ul ul { position:absolute; left:0; top:25px; display:none; background:#fff; } ul ul li { float:none; margin-top:1px; } </style> <script type="text/javascript"> function showMenu(obj) { obj.getElementsByTagName("ul")[0].style.display = "block"; } function hideMenu(obj) { obj.getElementsByTagName("ul")[0].style.display = "none"; } </script> </head> <body> <div id="navbar"> <ul> <li onmouseover="showMenu(this)" onmouseout="hideMenu(this)"> <a href="#">手机数码</a> <ul> <li><a href="#">手机数码1</a></li> <li><a href="#">手机数码2</a></li> <li><a href="#">手机数码3</a></li> </ul> </li> <li onmouseover="showMenu(this)" onmouseout="hideMenu(this)"> <a href="#">淘宝集市</a> <ul> <li><a href="#">淘宝集市1</a></li> <li><a href="#">淘宝集市2</a></li> <li><a href="#">淘宝集市3</a></li> </ul> </li> <li onmouseover="showMenu(this)" onmouseout="hideMenu(this)"> <a href="#">品牌商城</a> <ul> <li><a href="#">品牌商城1</a></li> <li><a href="#">品牌商城2</a></li> <li><a href="#">品牌商城3</a></li> </ul> </li> </ul> </div> </body>