HTML+CSS實作導覽列二級下拉式選單CSS樣式

我們上一章已經把我們對應的HTML元素加上了class選擇器，現在我們把這些class加上我們的css樣式，程式碼如下

<style>
    li{
        list-style-type:none;
    }
    #menu {
        width:950px;
        margin:30px auto 0px;
        height:45px;
        background-color: #030e11;
    }
    #menu li {
        float:left;
        width:109px;
        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>

我們只需要將這些css樣式加到頁面中就可以實現我們想要的效果了

你可以把這些css樣式單獨放到css文件中，再在HTML頁面中引用一下即可

也可把它直接放到HTML頁面'head'裡面，本教學是放在了同一個頁面

看下一章完整程式碼