CSSナビゲーションバーのホバー - 背景の変更

Question

ナビゲーションバーを作成していたとき、そのフィールドが色分けされたときに色を変えたいと思っていました。ただし、色はナビゲーションバーの高さ全体を満たしていないようです。ここに私のコードは次のとおりです。

#nav { 
 
height: 80px; 
 
width: 100%; 
 
background-color: black; 
 
} 
 

 
#nav ul { 
 
list-style-type: none; 
 
margin: 0px; 
 
padding: 0px; 
 
} 
 

 
#nav ul li { 
 
float:left; 
 
margin: 20px; 
 
} 
 

 
#nav ul li a { 
 
text-decoration:none; 
 
line-height:40px; 
 
color: gray; 
 
font-weight: bold; 
 
font-size: 25px; 
 
display: block; 
 
} 
 

 
#nav ul li a:hover { 
 
color: black; 
 
background-color: gray; 
 
}

<div id="nav"> 
 
\t \t \t <ul> 
 
\t \t \t \t <li><a href="#">Home</a></li> 
 
\t \t \t \t <li><a href="#">About</a></li> 
 
\t \t \t \t <li><a href="#">Contact Us</a></li> 
 
\t \t \t \t <li><a href="#">Log In</a></li> 
 
\t \t \t </ul> 
 
\t \t </div>

はどのようにして推移したときに色がナビゲーションバーの全体の高さを埋めることができますか？

Answer 1

任意の色の変化になりませんmargin:margin: 20px;を持って#nav ul liあなたのリストコンテナ...私が代わりにパディングとなるだろう...

はスニペット

#nav { 
 
    height: 80px; 
 
    width: 100%; 
 
    background-color: black; 
 
} 
 
#nav ul { 
 
    list-style-type: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
#nav ul li { 
 
    float: left; 
 
    padding: 20px; 
 
} 
 
#nav ul li a { 
 
    text-decoration: none; 
 
    line-height: 40px; 
 
    color: gray; 
 
    font-weight: bold; 
 
    font-size: 25px; 
 
    display: block; 
 
} 
 
#nav ul li:hover { 
 
    color: green; 
 
    background-color: gray; 
 
} 
 
#nav ul li a:hover { 
 
    color: black; 
 
}

<div id="nav"> 
 
    <ul> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">About</a> 
 
    </li> 
 
    <li><a href="#">Contact Us</a> 
 
    </li> 
 
    <li><a href="#">Log In</a> 
 
    </li> 
 
    </ul> 
 
</div>

を見ます