 <p>The text is only showing up in white when you hover over the link tage: <code>&lt;a&gt;</code>, not the whole list item <code>&lt;li&gt;</code>.</p> <p>I think a better way to fix this is to make the link a block element, filling the whole list item space. If people hover anywhere over the list, they'll not only see the text in white, they'll also be able to click anywhere on the item.</p> <p>Here's a rework:</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#menu { margin-top: 10px; } #menu li { list-style:none; } #menu li a { font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 13px; padding:5px; text-decoration: none; line-height: 22px; width: 100%; color: #565656; border-bottom: 1px solid #e1e1e1; display:block; } #menu li a:hover { background-color: #c0392b; color: #FFF; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul id="menu"&gt; &lt;li&gt;&lt;a href="#"&gt;Strona główna&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Historia szkoły&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Absolwenci&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Dokumenty szkoły&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Ewaluacja wewnętrzna&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Zasady rekrutacji&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Nauczyciele&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Samorząd Uczniowski&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Rada Rodziców&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Kierunki i wychowawcy klas&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Kalendarz roku szkolnego&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Profilaktyka&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Kalendarz imprez i uroczystości&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Olimpiady, konkursy, zawody&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Koła zainteresowań&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Matura&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Egzamin zawodowy&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;</code></pre> </div> </div> </p>