首页 > 代码库 > 下拉菜单

下拉菜单

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
            
            #daohanglan {
                height: 35px;
                /*border: 1px solid black;*/
                width: 280px;
                position: relative;
                /*top: 0px;*/
                z-index: 200;
            }
            
            .annv {
                float: left;
                width: 70px;
                max-height: 35px;
                background-color: darkcyan;
                text-align: center;
                line-height: 35px;
                overflow: hidden;
            }
            
            ul {
                list-style: none;
            }
            
            .annv:hover{
                max-height: 300px;
                transition: 1s;
            }
            
            li{
                background-color: darkmagenta;
            }
        </style>
    </head>

    <body>
        <div id="daohanglan">
            <div class="annv">首页</div>
            <div class="annv">PHP
                <ul>
                    <li>1111</li>
                    <li>222222</li>
                    <li>444</li>
                </ul>
            </div>
            <div class="annv">JAVA
                <ul>
                    <li>1111</li>
                    <li>222222</li>
                    <li>333</li>
                    <li>444</li>
                </ul>
            </div>
            <div class="annv">.NET
                <ul>
                    <li>1111</li>
                    <li>222222</li>
                </ul>
            </div>
        </div>
        <div style="position: absolute;z-index: 100;">
            啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
            啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
        </div>
    </body>

</html>

 

下拉菜单