又一款CSS实现的竖排导航菜单

来源: 更新时间:10/02/09 点击:

又一款CSS实现的竖排导航菜单，下面是代码实例：

[CSS在线]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>CSS在线-示例</title> <style type="text/css"> #menu {height:132px; width:132px; position:relative;} #menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; padding:1px 1px 0 1px; background:#fff;} #menu li {margin:0; padding:0; list-style:none;} #menu li {display:inline;} #menu ul ul {position:absolute; left:-9999px;} #menu ul#toplevel {position:absolute; left:0; top:0;} #menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#000; line-height:22px; text-decoration:none;padding:0 20px 0 10px;} #menu li a.fly {background: url(/img/arrow.gif) no-repeat right top;} #menu li a:hover {background-color:#09c; color:#fff;} #menu li:hover > a {background-color:#09c; color:#fff;} #menu ul li:hover > ul {left:100%; margin-top:-23px; margin-left:-1px;} #menu a:hover ul, #menu a:hover a:hover ul, #menu a:hover a:hover a:hover ul {left:100%;} #menu a:hover ul ul, #menu a:hover a:hover ul ul {left:-9999px;} #menu table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-7px; margin-left:-1px;} </style> </head> <body> <div id="info"> <div id="info"> <h2>CSS在线-CSS竖排导航菜单</h2> <div id="menu"> <ul id="toplevel"> <li><a href="#url">Home</a></li> <li><a class="fly" href="#url">Contact Us</a>  <ul> <li><a href="#url">Email</a></li> <li><a href="#url">Telephone</a></li> <li><a href="#url">Online Form</a></li> <li><a href="#url">Snail Mail Address</a></li> </ul>  </li> <li><a class="fly" href="#url">Resort</a>  <ul> <li><a href="#url">Ski Hire Facilities</a></li> <li><a class="fly" href="#url">Main Ski Slopes</a>  <ul> <li><a href="#url">Beginners Slopes</a></li> <li><a href="#url">Intermediate Slopes</a></li> <li><a class="fly" href="#url">Advanced Skill Levels</a>  <ul> <li><a href="#url">Local</a></li> <li><a href="#url">Nearby</a></li> <li><a href="#url">With instructor</a></li> <li><a href="#url">Snow boarding</a></li> </ul>  </li> <li><a href="#url">Expert</a></li> </ul>  </li> <li><a href="#url">Night Life</a></li> <li><a class="fly" href="#url">Restaurants</a>  <ul> <li><a href="#url">Snow Hotel</a></li> <li><a href="#url">The Snowman</a></li> <li><a href="#url">Ice Cavern</a></li> <li><a href="#url">Ski Inn</a></li> </ul>  </li> <li><a class="fly" href="#url">Car Hire</a>  <ul> <li><a href="#url">From Airport</a></li> <li><a href="#url">In Resort</a></li> <li><a href="#url">Multiple Resorts</a></li> </ul>  </li> </ul>  </li> <li><a class="fly" href="#url">Information</a>  <ul> <li><a href="#url">Money Exchange</a></li> <li><a class="fly" href="#url">Resort Essential Information</a>  <ul> <li><a href="#url">Lift Passes</a></li> <li><a href="#url">Insurance</a></li> <li><a class="fly" href="#url">Gear Rental</a>  <ul> <li><a href="#url">Boots</a></li> <li><a href="#url">Skis</a></li> <li><a href="#url">Ski Wear</a></li> <li><a href="#url">Goggles</a></li> </ul>  </li> <li><a href="#url">Ski Schools</a></li> <li><a href="#url">Snow Report</a></li> </ul>  </li> <li><a class="fly" href="#url">Language</a>  <ul> <li><a href="#url">Austrian</a></li> <li><a href="#url">German</a></li> <li><a href="#url">French</a></li> <li><a href="#url">English</a></li> </ul>  </li> <li><a href="#url">Short Breaks</a></li> </ul>  </li> <li><a class="fly" href="#url">Surrounding Area</a>  <ul> <li><a href="#url">Where to go</a></li> <li><a href="#url">What to do</a></li> <li><a href="#url">Places of interest</a></li> <li><a href="#url">National parks & Museums</a></li> </ul>  </li> <li><a href="#url">Privacy</a></li> </ul> </div> </div>  </body> </html>

<< CSS实现导航链接tip效果纯CSS实现的三层竖排导航菜单 >>

又一款CSS实现的竖排导航菜单

DIV+CSS教程系列

DIV+CSS教程推荐阅读

DIV+CSS模板推荐

DIV+CSS设计工具