二级菜单栏

        <div id="nav">
            <ul>
                <li><a href="">首页</a></li>
                <li class="navmenu"><a href=".">产品 </a>
                    <ul>
                        <li><a href="l">全渠道获客</a></li>
                        <li><a href="">多触点沟通</a></li>
                        <li><a href="">私域互动转化</a></li>
                        <li><a href="">客户关系管理</a></li>
                    </ul>
                </li> 
            </ul>
        </div>

 #nav{ margin-left:80px;   width: 720px;}
    #nav ul{}
    #nav ul li{float:left; display:block; line-height: 50px;width:20%; position: relative;}
    #nav ul li a{color:#1a1a33;font-size: 16px; }
    #nav ul li:hover{color: #5757d9}
    #nav ul li ul{background: #fff; width: 100%; text-align: center;position: absolute;top:45px;left: -20%; display: none; border-radius: 5px; }
    #nav ul li ul li{float: none;width: 100%;}
   
    #nav ul li ul li:hover{
      /* background: #f5f5f7;*/
    border-radius: 4px;
    color: #5757d9;
    cursor: pointer
    }

 $(".navmenu").mouseover(function() {
        $(this).children("ul").show();
    });
    $(".navmenu").mouseout(function() {
        $(this).children("ul").hide();
    });
 

上一篇:08-页面解析之数据提取-python爬虫


下一篇:JavaScript事件的委派