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.

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

Il nous suffit d'ajouter ces styles CSS en l'ajoutant. à la page peut obtenir l'effet souhaité

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

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

Voir le code complet dans le chapitre suivant