CSS导航栏下拉列表

作者: JONE 分类: PHPer 发布时间: 2017-06-25 23:33
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .menu ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        .menu >ul>li{
            float: left;
        }
        .menu>ul>li>ul{
            display: none;      /*关键设置 隐藏二级列表*/
        }
        .menu>ul>li:hover ul{
            display: block; /*关键设置 显示二级列表*/
        }
    </style>
</head>
<body>
    <div class="menu">
        <ul>
            <li>主菜单1
                <ul>
                    <li>01分级菜单</li>
                    <li>02分级菜单</li>
                    <li>03分级菜单</li>
                </ul>
            </li>
                
                
            <li>主菜单2
                <ul>
                    <li>21分级菜单</li>
                    <li>22分级菜单</li>
                    <li>23分级菜单</li>
                </ul>

            </li>
            
            <li>主菜单3
            
                <ul>
                    <li>31分级菜单</li>
                    <li>32分级菜单</li>
                    <li>33分级菜单</li>
                </ul>
            </li>

            <div style="clear: both;"></div>
        </ul>
            
    </div>
</body>
</html>