首页 > 代码库 > 淘宝 京东等商城常用到的下拉菜单
淘宝 京东等商城常用到的下拉菜单
HTML部分
<ul class="nav_right" id="nav">
<li><a href="http://www.mamicode.com/#">我的金米仓<img src="http://www.mamicode.com/images/arrow-1.png" style="width:10px;"></a>
<ul>
<li><a href="http://www.mamicode.com/#">我的订单</a></li>
<li><a href="http://www.mamicode.com/#">我的积分</a></li>
<li><a href="http://www.mamicode.com/#">我的购物车</a></li>
<li><a href="http://www.mamicode.com/#">产品一</a></li>
<li><a href="http://www.mamicode.com/#">产品一</a></li>
<li><a href="http://www.mamicode.com/#">产品一</a></li>
</ul>
</li>
<li><a href="http://www.mamicode.com/#">收藏夹<img src="http://www.mamicode.com/images/arrow-1.png" style="width:10px;"></a>
<ul>
<li><a href="http://www.mamicode.com/#">商品收藏</a></li>
<li><a href="http://www.mamicode.com/#">店铺收藏</a></li>
</ul>
</li>
<li><a href="http://www.mamicode.com/#">客户服务<img src="http://www.mamicode.com/images/arrow-1.png" style="width:10px;"></a>
<ul>
<li><a href="http://www.mamicode.com/#">包裹跟踪</a></li>
<li><a href="http://www.mamicode.com/#">常见问题</a></li>
<li><a href="http://www.mamicode.com/#">在线退换货</a></li>
<li><a href="http://www.mamicode.com/#">在线投诉</a></li>
<li><a href="http://www.mamicode.com/#">在线答疑</a> </li>
</ul>
</li>
<li><a href="http://www.mamicode.com/#">网站导航<img src="http://www.mamicode.com/images/arrow-1.png" style="width:10px;"></a>
<ul>
<li style="border-bottom:1px #ccc solid;"><a href="http://www.mamicode.com/#">金米仓商城</a></li>
<li style="border-bottom:1px #ccc solid;">
<a href="http://www.mamicode.com/#">我们四</a> <a href="http://www.mamicode.com/#">金米仓</a> <a href="http://www.mamicode.com/#">金米仓</a>
<br>
<a href="">金米仓</a>
</li>
<li><a href="">网站联盟</a> <a href="">招商通道</a> </li>
</ul>
</li>
<li><a href="http://www.mamicode.com/#">关注我们:</a></li>
<li><img src="http://www.mamicode.com/images/invite_weibo.png" style="width:20px;vertical-align: middle;">
</li>
<li style="margin:0"><img src="http://www.mamicode.com/images/invite_wx.png" style="width:20px;vertical-align: middle;">
<ul>
<li><img src="http://www.mamicode.com/images/nihao.jpg" style="width:150px;position:relative;right:130px;"> </li>
</ul>
</li>
</ul>
CSS部分
#nav {
}
#nav a {
display: text-align:center;
}
#nav a:link {
color:#666; text-decoration:none;
}
#nav a:visited {
color:#666;text-decoration:none;
}
#nav a:hover {
text-decoration:none;
}
#nav li {
float: left; margin-right:15px;
}
#nav li:hover{
}
#nav li ul {
line-height: 27px; list-style-type: none;text-align:left;
left: -999em; position: absolute;
background: #fff;
}
#nav li ul li{
float:inherit;padding-left:10px;
}
#nav li ul a{ text-align:left;
}
#nav li ul a:link {
text-decoration:none;
}
#nav li ul a:visited {
text-decoration:none;
}
#nav li ul a:hover {
color:#fa3b29;;text-decoration:none;font-weight:normal;
}
#nav li:hover ul {
left: auto;
}
#nav li.sfhover ul {
left: auto;
}
#content {
clear: left;
}
JS部分
<script type=text/javascript>
<!--//--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
}
}
}
window.onload=menuFix;
//--><!]]>
</script>
淘宝 京东等商城常用到的下拉菜单
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。