アンカー要素のクリック可能な領域を拡大する

Question

私のナビゲーションバーには、200pxのパディングで右に浮かぶボタンが1つあります。

ただし、クリックした領域は展開されません。この問題を解決する適切な方法は何ですか？

body { 
 
    font-family: impact; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
div.content { 
 
    height: 1000px; 
 
    background-color: pink; 
 
} 
 
footer { 
 
    background-color: yellow; 
 
    height: 250px; 
 
} 
 
.menu-header a:link { 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 
.menu-header a:hover { 
 
    background: #000; 
 
} 
 
.menu-header { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: auto; 
 
    background-color: #333; 
 
    position: relative; 
 
    height: 100%; 
 
    overflow: auto; 
 
} 
 
ul.menu-header li a { 
 
    float: left; 
 
    padding: 10px; 
 
} 
 
ul.menu-header li:nth-of-type(6) { 
 
    float: right; 
 
    /*last button on the right-hand side*/ 
 
} 
 
li:nth-of-type(6) { 
 
    padding-right: 200px; 
 
}

<header> 
 
    <ul class="menu-header"> 
 
    <li> 
 
     <a href="index.html"> 
 
     <img width="13px" height="13px" src="images/fridge.png">What's Left?</a> 
 
    </li> 
 
    <li> 
 
     <a href="fridge.html">Mein Kühlschrank</a> 
 
    </li> 
 
    <li> 
 
     <a href="buylist.html">Einkaufsliste</a> 
 
    </li> 
 
    <li> 
 
     <a href="recipe.html">Rezepte vorschlagen</a> 
 
    </li> 
 
    <li> 
 
     <a href="kontakt.html">Kontakt</a> 
 
    </li> 
 
    <li> 
 
     <a href="login.html">Menü</a> 
 
    </li> 
 
    </ul> 
 
</header> 
 
<div class="content"> 
 
    Ich bin der Inhalt</br> 
 
    und ich meine es verdammt ernst 
 
</div> 
 
<footer> 
 
    ich bin der Fuss 
 
</footer>

私は正確に同じですが、4番目の子供はそれがパディングに応答しないために、コードの最後の行を変更した場合。

li a:nth-of-type(6)またはli:nth-of-type(6) aに変更すると同じです。

驚くべきことに、最初の子供からパディングを変更すると、それは完璧に機能します。

Answer 1

あなたはli上でこれを持っている：

li:nth-of-type(6) { 
    padding-right: 200px; 
} 

を代わりに、aにそのルールを適用します。

li:nth-of-type(6) a { 
    padding-right: 200px !important; /* you may need to override other rules */ 
} 

jsFiddle demo