CSS ul配合visibility 实现隐藏显示菜单栏 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 采用多个ul配合实现隐藏显示菜单栏 */
    *{margin: 0;padding: 0;}
    ul{ list-style: none;;margin-right: 1px;width: 115px;visibility:hidden;}/* 隐藏子菜单 */
    img{ display: block;}
    a{text-decoration: none;color: black;width: 100%;height: 100%;display: block;}
    li{text-align: center;line-height: 35px;font-size: 16px;background-color: #eeeeee;}
    .l{float: left;}
    .r{float: right;}
    #main{margin: 0 auto;width: 464px;}
    a:hover{color: white;text-decoration: underline;background-color: #333333;}
     /* 显示子菜单 */
    ul:hover{visibility:visible}
   /* 第一个li要显示 */
    #main .submenu .li-1{visibility:visible;}
</style>
<body>
    <div id="main">
        
        <ul class="submenu l">
            <li class="li-1">
                <a href="#"> 首页</a>
            </li>
        </ul>
        <ul class="submenu l">
            <li class="li-1">
                <a href="#">产品中心</a>
            </li>
            <li>
                <a href="">产品1</a> 
            </li>
            <li>
                <a href="">产品1</a> 
            </li>
            <li>
                <a href="">产品1</a> 
            </li>
        </ul>
        <ul class="submenu l">
            <li class="li-1">
                <a href="#">产品中心</a>
            </li>
            <li>
                <a href="">产品1</a> 
            </li>
            <li>
                <a href="">产品1</a> 
            </li>
            <li>
                <a href="">产品1</a> 
            </li>
        </ul>
        <ul class="submenu l">
            <li class="li-1">
                <a href="#">产品中心</a>
            </li>
            <li>
                <a href="">产品1</a> 
            </li>
            <li>
                <a href="">产品1</a> 
            </li>
            <li>
                <a href="">产品1</a> 
            </li>
        </ul>
    </div>
</body>
</html>

 效果图如下：

posted @ 2020-05-03 15:33  main(void)  阅读(587)  评论(0)  编辑  收藏  举报
.c_ad_block { display: none !important; } #ad_t2{ display: none !important; }