View Code
<!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> <style> *{margin:0; padding:0; list-style-type:none} body{behavior:url("http://iz100.com/htc/csshover.htc");} ul.nav, ul.nav ul{float:left; border:1px solid #486B02; background:#8BD400} ul.nav li{float:left; width:8em; background:#8BD400} ul.nav li ul{width:8em; position:absolute;left:-999em;} .nav li:hover ul{left:auto;} ul.nav a{display:block; color:#2B3F00;text-decoration:none;padding:0.3em 1em; border-right:1px solid #486B02;border-left:1px solid #E4FFD3} ul.nav li li a{border-top:1px solid #E4FFD3;border-bottom:1px solid #486B02;border-left:0;border-right:0} ul.nav li:last-child a{border-right:0; border-bottom:0} ul a:hover, ul a:focus{color:#E4FFD3;background-color:#6DA203} </style> </head> <body> <ul class="nav"> <li><a href="###">Home</a></li> <li><a href="###">Products</a> <ul> <li><a href="###">Silverback</a></li> <li><a href="###">Font Deck</a></li> </ul> </li> <li><a href="###">Services</a></li> </ul> </body> </html>
注意:需要在服务器才能运行:body{behavior:url("http://iz100.com/htc/csshover.htc");}这句代码
效果:
