HTML+CSS实现导航栏二级下拉菜单完整代码

工具是vs code

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        li{
            list-style-type: none;
        }
        #menu {
            width: 370px;
            margin: 30px auto 0px;
            height: 45px;
            background-color: #030e11;
        }
        #menu li{
            float: left;
            width: 92px;
            line-height:39px;
            text-align: center;
            position:relative;
            border:none;
        }
        #menu li a {
            font-size:16px; color: #e6f8e9;
            display:block;
            outline:0;
            text-decoration:none; 
        }
        #menu li:hover a {
            color: #ff0000; /*导航栏文字颜色 */
        }
        #menu li:hover .dropdown_1column {
            left:0px;
            top:38px;
        }
        .dropdown_1column{ /* 下拉菜单边框颜色*/
            margin: 0px auto;
            float: left;
            position: absolute;
            left: -999em;
            text-align: left;
            border: 1px solid #066591;
            border-top: none;
            background: #F4F4F4;
            width: 140px;
        }
        #menu li:hover div a { /* 下拉菜单文字颜色*/
        font-size:12px
        ;color:#444;
        }

        #menu li:hover div a:hover{color:#21910e;} /*下拉带单鼠标停留颜色*/

        #menu li ul {
        list-style:none;padding:10px 5px;
        margin:0;
        }
        #menu li ul li {
        font-size:12px;
        line-height:26px;
        position:relative;
        padding:0;margin:0;
        float:none;
        text-align:left;
        width:130px;
        }
        #menu li ul li:hover {
        background:none;
        border:none;padding:0;
        margin:0;
        }
    </style>
</head>
<body>
    <div id="menu">
    <ul>
        <li> <a href="" class="nodrop">首页</a></li>
        <li><a href="" class="drop">最火下载站</a>
        <div class="dropdown_1column">
            <div class="col_1">
                    <ul class="simple">
                            <li><a href="">网站建设</a></li>
                            <li><a href="">导航条代码</a></li>
                            <li><a href="">电子商务</a></li>
                    </ul>
            </div>
       
        </div>
        </li>
        <li><a href="" class="nodrop">联系我们</a></li>
    </ul>
    </div>

    
</body>
</html>

3.CSS + ul li 去掉列表项前面的标记类型

例如：

ul.circle {list-style-type:none;}

ul.circle {list-style-type:circle;}

ul.square {list-style-type:square;}
ol.upper-roman {list-style-type:upper-roman;}
ol.lower-alpha {list-style-type:lower-alpha;}

4.CSS + ul li  竖着排列转成横向排列方法

5.  块级元素，背景色设置

6.鼠标放上去小手形状，字体颜色变化

7.二级菜单出现位置，二级菜单边框，鼠标放到二级菜单上，字体颜色变化

 

posted @ 2019-06-11 19:31  爱笑的小宇宙  阅读(61981)  评论(0)  编辑  收藏  举报