Question

I have a simple list I am using for a horizontal menu:

<ul>     <h1>Menu</h1>     <li>       <a href='/' class='selected'>Home</a>     </li>     <li>       <a href='/Home'>Forum</a>     </li> </ul> 

When I add a background color to the selected class, only the text gets the color, I want it to stretch the entire distance of the section.

Hope this makes sense.

Answer 1

The a element is an inline element, meaning it only applies to the text it encloses. If you want the background color to stretch across horizontally, apply the selected class to a block level element. Applying the class to the li element should work fine.

Alternatively, you could add this to the selected class’ CSS:

display: block; 

Which will make the a element display like a block element.