淘宝 京东等商城常用到的下拉菜单

Posted 2020-08-13

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>&nbsp;&nbsp;&nbsp;<a href="#">金米仓</a>&nbsp;&nbsp;&nbsp;<a href="#">金米仓</a>
                <br>
                <a href="">金米仓</a>
            </li>
            <li><a href="">网站联盟</a>&nbsp;&nbsp;&nbsp;<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>