模仿电子商务垂直菜单

标签：

     布局：  

  <div class="wrapper">
     <div class="menuList">
         <ul>
             <li>
             <a  href="#">家用电器</a>
                <s></s>
                <div class="zicaidan" >
                     <a>女装</a>
                     <a>男装</a>  
                      <a>女装</a>
                     <a>男装</a>  
                      <a>女装</a>
                     <a>男装</a>  
                     <a>更多</a>
                </div>
             </li>
              <li>
                <a  href="#">手机，数码</a>
                  <s></s>
                 <div class="zicaidan" > ffffff</div>
              </li>
               <li>
                  <a  href="#">电脑，办公</a>
                    <s></s>
                    <div class="zicaidan" >
                      <a>女装</a>
                     <a>男装</a>  
                      <a>女装</a>
                     <a>男装</a>  
                      <a>女装</a>
                     <a>男装</a>  
                    
                    
                    </div>
                </li>
                <li>
                   <a  href="#">男装，女装</a>
                      <s></s>
                      <div class="zicaidan" >
                         <a>女装</a>
                     <a>男装</a>  
                      <a>女装</a>
                     <a>男装</a>  
                      <a>女装</a>
                     <a>男装</a>  
                      </div>
                  </li>
                 <li>
                    <a  href="#">个性化妆</a>
                        <s></s>
                       <div class="zicaidan" > ffffff</div>
                   </li>
                  <li>
                    <a  href="#">箱包，钟表</a>
                        <s></s>
                        <div class="zicaidan" > ffffff</div>
                   </li>
                   <li>
                     <a  href="#">母婴，玩具</a>
                       <s></s>
                       <div class="zicaidan" > ffffff</div>
                    </li>
                    <li>
                       <a  href="#">食品</a>
                         <s></s>
                         <div class="zicaidan" > ffffff</div>
                      </li>
                     <li>
                        <a  href="#">营养保健</a>
                          <s></s>
                          <div class="zicaidan" > ffffff</div>
                        </li>
                      <li>
                        <a  href="#">彩票</a>
                          <s></s>
                          <div class="zicaidan" > ffffff</div>
                      </li>
         </ul>
     </div>
  </div>
  样式：

     *{
    margin:0;
    padding:0;
}
img{
     border:none;
    }
li{
    list-style:none;
    }
.wrapper{
    margin:20px auto;
    width:200px;
    }
    .menuList{
        width:160px;
        min-height:300px;
        height:auto;
        border:1px solid #3459DB;
        color:white;
        }
        .menuList ul li{
            float:left;
            position:relative;
            width:160px;
            height:30px;
            line-height:30px;
            z-index:8;
            }
                    .menuList ul li:hover {
                        position:relative;
                        z-index:555;
                         border-top: 1px solid red;
                        border-bottom: 1px solid red;
                        box-shadow: 0px 0px 2px #eee;
                        }
            .menuList ul li .zicaidan{
                border:1px solid red;
                display:none;
                background:#ffffff;
                width:200px;
                height:160px;
                position:absolute;
                left:160px;
                top:-2px;
                }
                .menuList ul li .zicaidan a{
                    display:inline-block;
                    width:50px;
                    height:30px;
                    line-height:30px;
                    color:black;
                    margin-left:10px;
                    border-radius:10px;
                    text-align:center;
                    }
                    .menuList ul li .zicaidan a:hover{
                        background:orange;
                        }
            .menuList ul li a{
                font-size:12px;
                padding-left:15px;
                color:red;
                text-decoration:none;
            }
            .menuList ul li s{
                        position: absolute;
                        right: -2px;
                        top:0px;
                        width: 10px;
                        height: 30px;
                        background-color: white;
                        z-index:10;
                        display: none;

                }

  js调用：

    注意：在此之前要在<header>头部引入js。

　　   <script type="text/javascript">
                $(document).ready(
                        function(){
                                $(".menuList ul li").mouseenter(function(){
                                        $(this).children(".zicaidan").show();
                                        $(this).children("s").show();
                                });

                                $(".menuList ul li").mouseleave(function(){
                                        $(this).children(".zicaidan").hide();
                                        $(this).children("s").hide();
                                });
                        }
                );
 </script>

  这样就可以轻松的实现想要的效果，还在等什么啊，赶紧过来试一下吧。

模仿电子商务垂直菜单

标签：

原文地址：http://www.cnblogs.com/luckystar-wangran/p/4670946.html