Question

Consider my html as follows:

<ul id="menu">
<a href="home.html"><li class="highlighted" id="first_item">Home</li></a>
<a href="join.html"><li class="non_selected_tabs">Join</li></a>
<a href="fixtures.html"><li class="non_selected_tabs">Fixtures</li></a>
<a href="club.html"><li class="non_selected_tabs">Our Club</li></a>
<a href="history.html"><li class="non_selected_tabs">History</li></a>
<a href="club_gear.html"><li id="hover" class="non_selected_tabs">Club Gear</li></a>
</li>
</ul>

My lists are styled as tabs, and I have my anchors as their parents so that when a user hovers over a tab it becomes selectable

My issue is that I was hoping to use a:hover, or the other anchor properties to change the background colour of my list item…is this possible using CSS?
I can’t get it to work so I’m thinking I may have to use some JavsScript?

Answer 1

Wrapping the <li>‘s in <a> is improper HTML and may not render properly in all browsers. A better solution would be to set the display property of the anchor to display:inline-block. Then you will be able to set the width and height of the anchor to the width and height of the li’s. This way you can also use the hover property of the anchors.

<ul id="menu">
 <li class="highlighted" id="first_item"><a  href="home.html">Home</a></li>
<li class="non_selected_tabs"><a href="join.html">Join</a></li>
<li class="non_selected_tabs"><a href="fixtures.html">Fixtures</a></li>
<li class="non_selected_tabs"><a href="club.html">Our Club</a></li>
<li class="non_selected_tabs"><a href="history.html">History</a></li>
<li id="hover" class="non_selected_tabs"><a href="club_gear.html">Club Gear</a></li>

</ul>

#menu li a
{
   display: inline-block;
   width: 100%;
   height: 100%;
}
#menu li a:hover
{
  background-color:red;
}