日期:2014-05-19  浏览次数:20520 次

请问这种导航应该怎么实现?
今天浏览网页的时候看到网页中有如下导航:

http://www.lstx.com.cn/Simplified/ProductList.asp?SortID=9&SortPath=0,3,9,


不知道是怎么实现的?   能用sitemap,   menu和sitemappath实现吗?   应该怎么实现?

新手来的,   请大家指点,   谢谢.   :)

------解决方案--------------------
sitemap 足够了
------解决方案--------------------


<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=GB2312 " />
<meta name= "Keywords " content= "bilingual menu,中英文双语菜单 " />
<meta http-equiv= "Description " content= "完全用CSS实现的中英文双语导航菜单 " />
<meta content= "all " name= "robots " />
<meta name= "author " content= "forestgan " />
<title> 完全用CSS实现的中英文双语导航菜单 </title>
<style type= "text/css ">
a{
color: #FFFF99;
text-decoration: none;
}

a:hover{
color: #FFFFFF;
text-decoration: underline;
}

#nav{
padding: 10px 10px 0;
font-size: 12px;
font-weight: bold;
margin: 1em 0 0;
list-style:none;
}

#nav li{
float: left;
margin-right: 1px;
}

.bi{
position: relative;
z-index: 0;
}

.bi:hover{
z-index: 99;
}

.bi:hover span{
visibility: visible;
top: 0;
left: 0;
cursor: pointer;
}

.bi span{
position: absolute;
left: -999em;
visibility: hidden;
}

#nav li a,.bi:hover span{
line-height: 20px;
text-decoration: none;
background: #DDDDDD;
color: #666666;
display: block;
width: 80px;
text-align: center;
}

#nav li a:hover,.bi:hover span{
color: #FFFFFF;
background: #DC4E1B;
}

.bi:hover span{
padding-top: 2px;
}

#navbar{
background: #DC4E1B;
height: 8px;
overflow: hidden;
clear: both;
}

</style>
</head>
<body>
<div id= "top ">
<ul id= "nav ">
<li> <a class= "bi " href= "index.html "> Home <span> 首 页 </span> </a> </li>
<li> <a class= "bi " href= "about.html "> About us <span> 关于我们 </span> </a> </li>
<li> <a class= "bi " href= "products.html "> Products <span> 产品展示 </span> </a> </li>
<li> <a class= "bi " href= "services.html "> Services <span> 售后服务 </span> </a> </li>
<li> <a class= "bi " href= "contact.html "> Contact <span> 联系我们 </span> </a> </li>
</ul>
<div id= "navbar "> </div>

</body>
</html>