HTML+CSS implémente le style CSS du menu déroulant secondaire de la barre de navigation

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;           /*导航栏文字颜色 */
    }
    #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>

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