ulとliの場合、ホバーの動作が直感的ではないのはなぜですか？

Question

各メニュー項目を赤い色で強調表示し、その上にカーソルを置いてみたかったのです。だから私の直感では、私は.menu ul li: hover{...}でした。

疑い1：しかし、これはliテキストの背景は色ではなくliのパディング部分を変更しました。 paddingが色を変更しないのはなぜですかpaddingもli要素の一部ですか？

・ダウト2：次のコードのように私は.menu ul :hoverを行うことによって予想される動作を達成しました。しかし、これは私の直感に反するものです。 ul全体が背景に色を変えて、メニュー項目全体が強調表示されるようにする必要はありませんか？

コード：あなたはulと:hoverの間にスペースがあるので、それはすべての子供たちにbackground:redを追加しているため

body { 
 
    background-color: #EEE; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.header { 
 
    height: 60px; 
 
    background-color: #FFF; 
 
    box-shadow: 0 0 3px rgba(0,0,0,.2); 
 
} 
 
.logo { 
 
    position: relative; 
 
    display: inline-block; 
 
    height: 40px ; 
 
    width: 100px ; 
 
    top:10px; 
 
    left: 10px; 
 
} 
 
.menu ul { 
 
    float: right; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    margin-right:40px; 
 
    margin-top: auto; 
 
    margin-bottom:auto; 
 
} 
 
.menu ul li { 
 
    position: relative; 
 
    top: -15px; 
 
    display: inline; 
 
    padding:10px 20px; 
 
} 
 
.menu ul :hover { 
 
    background-color: red; 
 
} 
 
.menu ul li a { 
 
    text-decoration: none; 
 
}

<div class="header"> 
 
    <div class="logo"> 
 
    <img src="logo_new1.png" class="img"> 
 
    </div> 
 
    <div class="menu"> 
 
    <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">Activities</a></li> 
 
     <li><a href="#">About us</a></li> 
 
     <li><a href="#">Contacts</a></li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

瞬間、あなたはulをホバリングされていませんホバリングされた場合、ulの要素（これはliです）。あなたはそれがulで作業していると思う理由は、その要素がpaddingない場合があります場合、これはあなたのコードの実際の出力

.menu ul *:hover {background:red} 

:hoverであることがpaddingに影響を与えるだろう、

だ、それは勝ちましたtはpaddingを追加するので、あなたはpaddingを持っているしたい場合は、:hoverli

body { 
 
    background-color: #EEE; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.header { 
 
    height: 60px; 
 
    background-color: #FFF; 
 
    box-shadow: 0 0 3px rgba(0, 0, 0, .2); 
 
} 
 
.logo { 
 
    position: relative; 
 
    display: inline-block; 
 
    height: 40px; 
 
    width: 100px; 
 
    top: 10px; 
 
    left: 10px; 
 
} 
 
.menu ul { 
 
    float: right; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    margin-right: 40px; 
 
    margin-top: auto; 
 
    margin-bottom: auto; 
 
} 
 
.menu ul li { 
 
    position: relative; 
 
    top: -15px; 
 
    display: inline; 
 
    padding: 10px 20px; 
 
} 
 

 
.menu ul li a { 
 
    text-decoration: none; 
 
} 
 
.menu ul li:hover { 
 
    background-color: red; 
 
}

<div class="header"> 
 
    <div class="logo"> 
 
    <img src="logo_new1.png" class="img"> 
 
    </div> 
 
    <div class="menu"> 
 
    <ul> 
 
     <li><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="#">Activities</a> 
 
     </li> 
 
     <li><a href="#">About us</a> 
 
     </li> 
 
     <li><a href="#">Contacts</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

する必要がありますサブ項目がホバリング用にフォーマットされるため、hover`：