建议使用FF,Safari，举个例子：<！doctypehtml>
1234567891011121314151617181920212223242526272829303132333435主要还是在样式切换，我有个类似的案例，你可以看看，主要的代码贴出来了，那就看你的自学能力了首页123456样式部分：.nav_bgli{float:left;display:inline;height:26px;color:#fff;font-size:14px;font-weight:700;padding:020px;margin:05px;line-height:26px;text-align:center;border:1pxtransparentsolid;border-radius:5px;behavior:url(css/PIE.htc);position:relative;}.nav_bgli:hover,.nav_bgli.on{cursor:pointer;background:#fff;border-top:1px#000solid;border-left:1px#000solid;}。
使用纯css来实现的一个响应式导航菜单，我们使用的是html5+css3技术，当浏览器窗口变小或者使用手机浏览器访问的时候，原本横条菜单会收缩成一个下拉菜单，当鼠标滑向菜单时下拉展示全部菜单此方法可以应用到有特别多的链接菜单项目中，特别在移动项目中，它可以将所有菜单转换成一个按钮式的下拉菜单。
html示例中有一个导航菜单的html结构，元素用来定位导航菜单，.current表示当前活动的导航项。复制代码代码如下：class="current">首页href="#">客户服务href="#">产品展示href="#">经典案例href="#">联系我们css首先我们要给菜单nav相对定位，我们在.navli中使用display:inline-block代替float:left，这样一来我们可以使用text-align来对nav菜单进行左中右对齐设置。
复制代码代码如下：.nav{position:relative;margin:20px0;}.navul{margin:0;padding:0;}.navli{margin:05px10px0;padding:0;list-style:none;display:inline-block;}.nava{padding:3px12px;text-decoration:none;color:#999;line-height:100%;}.nava:hover{color:#d0d0d0;}.nav.currenta{background:#999;color:#fff;border-radius:5px；}使用text-align对菜单进行右对齐和居中对齐。/*rightnav*/.nav.rightul{text-align:right;}/*centernav*/.nav.centerul{text-align:center；}接下来我们来做响应式设计，我们使用css3的mediaquery来实现。
当浏览器窗口宽度小于600px时，我们把设置成relative相对定位，把设置成absolute绝对定位，并且display:none隐藏所有li元素，这个时候导航菜单变成一个固定大小的按钮。当鼠标滑向nav元素时，菜单下拉展开，设置所有li的样式display:block，具体请看代码：复制代码代码如下：@mediascreenand(max-width:600px){.nav{position:relative;min-height:40px;}.navul{width:180px;padding:5px0;position:absolute;top:0;left:0;border:solid1px#aaa;background:#fffurl(images/menu.png)no-repeat10px11px;border-radius:5px;box-shadow:01px2pxrgba(0,0,0,.3);}.navli{display:none;/*hideallitems*/margin:0;}.nav.current{display:block;/*showonlycurrentitem*/}.nava{display:block;padding:5px5px5px32px;text-align:left;}.nav.currenta{background:none;color:#666;}/*onnavhover*/.navul:hover{background-image:none;}.navul:hoverli{display:block;margin:005px;}.navul:hover.current{background:url(images/check.png)no-repeat10px7px;}/*rightnav*/.nav.rightul{left:auto;right:0;}/*centernav*/.nav.centerul{left:50%;margin-left:-90px;}}。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>；导航栏</title>
<styletype="text/css">
*{
margin:0px;
padding:0px;
}
.nav{
width:960px;
height:60px;
border:1pxsolidred;
margin:100pxauto;
}
.navul{
list-style:none;
}
.navulli{
float:left;
background-color:#e7ffb0;
}
.navullia{
display:block;
width:120px;
text-align:center;
line-height:60px;
text-decoration:none;
color:#5a3467;
}
.navullia:hover{
cursor:pointer;
background-color:#645e55;
color:#cdff83;
}
</style>
</head>
<body>
<divclass="nav">
<ul>
<li><ahref="#">；网站导航</a></li>
<li><ahref="#">；网站导航</a></li>
<li><ahref="#">；网站导航</a></li>
<li><ahref="#">；网站导航</a></li>
<li><ahref="#">；网站导航</a></li>
<li><ahref="#">；网站导航</a></li>
<li><ahref="#">；网站导航</a></li>
<li><ahref="#">；网站导航</a></li>
</ul>
</div>
</body>
</html>
主要还是在样式切换，我有个类似的案例，你可以看看，主要的代码贴出来了，那就看你的自学能力了首页在线服务组织架构工作简报知识产权相关常识专利知识培训服务案件审理公开样式部分：.nav_bgli{float:left;display:inline;height:26px;color:#fff;font-size:14px;font-weight:700;padding:020px;margin:05px;line-height:26px;text-align:center;border:1pxtransparentsolid;border-radius:5px;behavior:url(css/PIE.htc);position:relative;}.nav_bgli:hover,.nav_bgli.on{cursor:pointer;background:#fff;border-top:1px#000solid;border-left:1px#000solid;}。
这个只是一个图标字体，一般要结合js点击或者经过触发事件。
代码：
<metacharset='utf-8'/>