Kami telah menambah pemilih kelas pada elemen HTML kami yang sepadan dalam bab sebelumnya Sekarang kami menambah kelas ini pada gaya css kami Kodnya adalah seperti berikut

<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;           /*導(dǎo)航欄文字顏色 */
    }
    #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;}   /*下拉菜單鼠標(biāo)停留顏色*/
    #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>

Kami hanya perlu menambah gaya css ini. ke halaman boleh mencapai kesan yang kita inginkan

Anda boleh meletakkan gaya css ini ke dalam fail css secara berasingan, dan kemudian merujuknya dalam halaman HTML

Anda juga boleh meletakkan Ia diletakkan terus dalam 'kepala' halaman HTML Tutorial ini diletakkan pada halaman yang sama

Lihat kod lengkap dalam bab seterusnya