CODEWITHSUNDEEP
htmlcssmenuhover
loczek
loczek

Reputation: 121

Effect hover in menu

I want the text color of a li item to change when it is hovered. Currently it changes only when <a> in the li is hovered. How to fix it? 

#menu {
	margin-top: 10px;
}

#menu li {
	line-height: 32px;
	width: 100%;
	color: #565656;
	border-bottom: 1px solid #e1e1e1;
}

#menu li a {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 13px;
	text-decoration: none;
	color: #565656;
}

#menu li a:hover {
	color: #FFF;
}

#menu li:hover {
	background-color: #c0392b;
	color: #FFF;
}
<ul id="menu">
            	<li><a href="#">Strona główna</a></li>
                <li><a href="#">Historia szkoły</a></li>
                <li><a href="#">Absolwenci</a></li>
                <li><a href="#">Dokumenty szkoły</a></li>
                <li><a href="#">Ewaluacja wewnętrzna</a></li>
                <li><a href="#">Zasady rekrutacji</a></li>
                <li><a href="#">Nauczyciele</a></li>
                <li><a href="#">Samorząd Uczniowski</a></li>
                <li><a href="#">Rada Rodziców</a></li>
                <li><a href="#">Kierunki i wychowawcy klas</a></li>
                <li><a href="#">Kalendarz roku szkolnego</a></li>
                <li><a href="#">Profilaktyka</a></li>
                <li><a href="#">Kalendarz imprez i uroczystości</a></li>
                <li><a href="#">Olimpiady, konkursy, zawody</a></li>
                <li><a href="#">Koła zainteresowań</a></li>
                <li><a href="#">Matura</a></li>
                <li><a href="#">Egzamin zawodowy</a></li>
            
            </ul>

Upvotes: 1

Views: 74

Answers (3)

mrfour
mrfour

Reputation: 1268

If you also need the li item clickable, you can achieve this by adding the following code:

#menu li a { 
    display: block; 
}

Upvotes: 1

murraybunton
murraybunton

Reputation: 43

The text is only showing up in white when you hover over the link tage: <a>, not the whole list item <li>.

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.

Here's a rework:

#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;
}
<ul id="menu">
            	<li><a href="#">Strona główna</a></li>
                <li><a href="#">Historia szkoły</a></li>
                <li><a href="#">Absolwenci</a></li>
                <li><a href="#">Dokumenty szkoły</a></li>
                <li><a href="#">Ewaluacja wewnętrzna</a></li>
                <li><a href="#">Zasady rekrutacji</a></li>
                <li><a href="#">Nauczyciele</a></li>
                <li><a href="#">Samorząd Uczniowski</a></li>
                <li><a href="#">Rada Rodziców</a></li>
                <li><a href="#">Kierunki i wychowawcy klas</a></li>
                <li><a href="#">Kalendarz roku szkolnego</a></li>
                <li><a href="#">Profilaktyka</a></li>
                <li><a href="#">Kalendarz imprez i uroczystości</a></li>
                <li><a href="#">Olimpiady, konkursy, zawody</a></li>
                <li><a href="#">Koła zainteresowań</a></li>
                <li><a href="#">Matura</a></li>
                <li><a href="#">Egzamin zawodowy</a></li>
            
            </ul>

Upvotes: 0

dNitro
dNitro

Reputation: 5355

Change:

#menu li a:hover {
    color: #FFF;
}

To:

#menu li:hover a {
    color: #FFF;
}

Upvotes: 2

Related Questions