Hej, witam serdecznie. Tworzę pewien prosty szablon strony, mój projekt jest praktycznie gotowy, jednak chciałbym poprawić menu. Otóż mam problem, ponieważ nie wiem w jaki sposób mógłbym uzyskać taki o to efekt:
Po najechaniu na pozycje podświetla się na niebiesko w bloku, razem z ikoną.
W moim menu niestety podświetla się tylko link, a chciałbym uzyskać taki efekt jak wyżej.
Tak wygląda kod HTML dla mojego menu:
<nav id="mainmenu">
<ul>
<li><a href="#"><span class="ico-home"></span>Home</a></li>
<li><a href="#"><span class="ico-blog"></span>Blog</a></li>
<li><a href="#"><span class="ico-portfolio"></span>Portfolio</a></li>
<li><a href="#"><span class="ico-page"></span>Pages</a></li>
<li><a href="#"><span class="ico-forum"></span>Forum</a></li>
<li><a href="#"><span class="ico-contact"></span>Contact</a></li>
</ul>
</nav><!--/mainmenu-->
Tutaj kod CSS:
#mainmenu {
width: 560px;
height: 90px;
margin: 0 20px 0 0;
}
#mainmenu li {
font-family: Open Sans Condensed;
font-size: 18px;
list-style-type: none;
text-shadow: 1px 1px #000;
text-align: center;
display: inline-block;
margin: 35px 10px 0 0;
padding: 10px 10px 0 20px;
}
#mainmenu ul li a {
color: #f1f1f1;
}
#mainmenu ul li a:hover {
color: #ff4b64;
}