android 京东 下拉菜单,实用三级下拉菜单（店铺导航装修）

刚从别人手上接到京东店铺，研究了半天才弄懂怎么装修。

分享个刚做的导航，希望大家以后多多交流！

效果图如下

代码如下：

.user_nav {height: 30px;width: 990px;margin-right: auto;margin-left: auto;}

.user_menu {width:990px;z-index:1;position:absolute;font-family:microsoft yahei;font-size:13px;margin:0 auto;}

.user_menu .mt {display:none;}

.user_menu ul {width:990px;height:30px;background-color:#cb0000;padding:0;margin:0 auto;list-style:none; }

.user_menu ul li {float:left;margin:0px;position:relative;}

.user_menu ul li .biaoti {display:block;height:30px;overflow:hidden;text-align:center;line-height:30px;color:white;text-decoration:none;transition:all 0.4s ease;

-moz-transition:all 0.4s ease;-webkit-transition:all 0.4s ease;-o-transition:all 0.4s ease;width: 120px;}

.user_menu ul li .all {padding-right:15px;background:url(http://img11.360buyimg.com/cms/g13/M08/15/0C/rBEhU1J53pMIAAAAAAAAUfY5SdkAAFEjAP_-3UAAABp387.gif) 105px top no-repeat #980416;}

.user_menu ul li .biaoti:hover {background-color:#E60012;}

.user_menu ul li ul {display:none;}

.user_menu ul li:hover {background-color:#E60012;}

.user_menu ul li:hover ul {display:block;width:135px;height:auto;background-color:#ddd;position:absolute;top:30px;left:0px;z-index:1;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);opacity:0.9;padding-top: 10px;padding-bottom: 10px;}

.user_menu ul li:hover ul li ul {display: none;}

.user_menu ul li:hover ul li a {display:block;color:#000;height: 30px;width: 135px;line-height: 30px;text-indent: 20px;text-decoration: none;background-color: #ddd;}

.user_menu ul li:hover ul li a:hover {color:#FFFFFF;width: 135px;line-height: 30px;text-indent: 20px;background-color: #CC0000;}

.user_menu ul li:hover ul li:hover ul {display:block;position:absolute;left:135px;top:0;width: 135px;line-height: 30px;}

• 查看所有商品

  • 所有宝贝
    • 按销量
    • 按价格
    • 按好评度

  • 卡通系列

    • 小豪龙系列

  • 家庭系列

    • 玫瑰花系列

    • 牡丹花系列

    • 如花似锦

  • 果盘系列

  • 托盘热垫系列

  • 烟盅系列

  • 筷子系列

  • 酒店餐饮系列

    • 双色系列

• 店铺首页

• 卡通系列

• 家庭系列

• 果盘系列

• 托盘系列

• 烟盅系列

• 店铺活动专区

大家可以直接复制到自己店铺测试下 或者到DW中本地测试效果。

如果要修改，可以直接在上面代码上修改。

如果想要导航的背景全屏

可以直接在前面加上

新人 多多关照！