HTML部分
<ul class="nav_right" id="nav"> <li><a href="#">我的金米仓<img src="images/arrow-1.png" style="width:10px;"></a> <ul> <li><a href="#">我的订单</a></li> <li><a href="#">我的积分</a></li> <li><a href="#">我的购物车</a></li> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> </ul> </li> <li><a href="#">收藏夹<img src="images/arrow-1.png" style="width:10px;"></a> <ul> <li><a href="#">商品收藏</a></li> <li><a href="#">店铺收藏</a></li> </ul> </li> <li><a href="#">客户服务<img src="images/arrow-1.png" style="width:10px;"></a> <ul> <li><a href="#">包裹跟踪</a></li> <li><a href="#">常见问题</a></li> <li><a href="#">在线退换货</a></li> <li><a href="#">在线投诉</a></li> <li><a href="#">在线答疑</a> </li> </ul> </li> <li><a href="#">网站导航<img src="images/arrow-1.png" style="width:10px;"></a> <ul> <li style="border-bottom:1px #ccc solid;"><a href="#">金米仓商城</a></li> <li style="border-bottom:1px #ccc solid;"> <a href="#">我们四</a> <a href="#">金米仓</a> <a href="#">金米仓</a> <br> <a href="">金米仓</a> </li> <li><a href="">网站联盟</a> <a href="">招商通道</a> </li> </ul> </li> <li><a href="#">关注我们:</a></li> <li><img src="images/invite_weibo.png" style="width:20px;vertical-align: middle;"> </li> <li style="margin:0"><img src="images/invite_wx.png" style="width:20px;vertical-align: middle;"> <ul> <li><img src="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>
时间: 2024-10-15 08:30:31