HTML+CSS implements the CSS style of the navigation bar's secondary drop-down menu

We have added class selectors to our corresponding HTML elements in the previous chapter. Now we add these classes to our css styles. The code is as follows

<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>

We only need to add these css styles to the page to achieve the effect we want

You can put these css styles separately into css files and then reference them in the HTML page.

You can also put it directly in the 'head' of the HTML page. This tutorial is placed on the same page.

See the complete code in the next chapter