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 type="text/css"> *{margin:0;padding:0;list-style:none;} <!-- body,td,th { font-family: Verdana, Geneva, sans-serif; font-size: 100%; color: #666; } body { background-color: #fff; margin: 20px; } a, a:hover, a:active, a:focus { outline:0; direction:ltr; } .wrapper { position:relative;height:25px; } .mainmenu { position:absolute; left:30%; z-index:100; font-family:Verdana, Geneva, sans-serif; font-weight:normal; font-size:90%; line-height:25px; } ul.menu { width:100px; overflow:hidden; float:left; margin-right:1px; } ul.menu a { text-decoration:none; color:#fff; padding-left:5px; } ul.menu li.list { float:left; width:250px; margin:-32767px -125px 0px 0px; background:red; } ul.menu li.list a.category { position:relative; z-index:50; display:block; float:left; width:120px; margin-top:32767px; background:transparent; } ul.menu li.list a.category:hover, ul.menu li.list a.category:focus, ul.menu li.list a.category:active { margin-right:1px; background:green; } ul.submenu { float:left; padding:25px 0px 0px 0px; background:green; background-repeat:no-repeat; background-position:left top; margin:-25px 0px 0px 0px; } ul.submenu li a { float:left; width:120px; background:#369; clear:left; } ul.submenu a:hover, ul.submenu a:focus, ul.submenu a:active { background:#900; margin-right:1px; } --> </style> </head> <body> <div class="wrapper"> <div class="mainmenu"> <ul class="menu"> <li class="list"> <a class="category" href="#Home">Home</a> </li> </ul> <ul class="menu"> <li class="list"> <a class="category" href="#about">About Us »</a> <ul class="submenu"> <li><a href="#about1">About link 1</a></li> <li><a href="#about2">About link 2</a></li> <li><a href="#about3">About link 3</a></li> <li><a href="#about4">About link 4</a></li> </ul> </li> </ul> <ul class="menu"> <li class="list"> <a class="category" href="#articles">Articles »</a> <ul class="submenu"> <li><a href="#articles1">Articles link 1</a></li> <li><a href="#articles2">Articles link 2</a></li> <li><a href="#articles3">Articles link 3</a></li> </ul> </li> </ul> <ul class="menu"> <li class="list"> <a class="category" href="#news">News »</a> <ul class="submenu"> <li><a href="#news1">News link 1</a></li> <li><a href="#news2">News link 2</a></li> </ul> </li> </ul> <ul class="menu"> <li class="list"> <a class="category" href="#donate">Donate</a> </li> </ul> <ul class="menu"> <li class="list"> <a class="category" href="#contact">Contact</a> </li> </ul> <!-- end mainmenu --></div> <!-- end wrapper --></div> </body>
效果:
