HTML+CSS實現導航欄二級下拉菜單完整代碼

本文轉載自查看原文 2019-06-11 19:31 23150 前端學習

工具是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.二級菜單出現位置，二級菜單邊框，鼠標放到二級菜單上，字體顏色變化

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 【HTML+CSS】實現側邊欄下拉菜單 html+css二級導航的實現如何實現導航菜單欄中的二級下拉菜單？純CSS實現二級導航下拉菜單--css的簡單應用 HTML+CSS制作二級菜單欄 JavaScript實現HTML導航欄下拉菜單[懸浮顯示] 用三種方式實現導航菜單中的二級下拉菜單制作二級下拉菜單無限級下拉菜單（樹形菜單，二級菜單） javascript實現下拉二級菜單