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