Nous avons ajouté des sélecteurs de classe à nos éléments HTML correspondants dans le chapitre précédent. Nous ajoutons maintenant ces classes à nos styles CSS. Le code est le suivant

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

Nous. il suffit d'ajouter ces styles CSS à la page pour obtenir l'effet souhaité

Vous pouvez mettre ces styles CSS séparément dans des fichiers CSS, puis les référencer dans la page HTML

Vous pouvez également mettre directement dans le 'head' de la page HTML. Ce tutoriel est placé sur la même page

Voir le code complet dans le chapitre suivant