Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by sandygomez
sandygomez
2,498 Points

when you hover over a link in navbar I want the hover to take up the full space, not just space enough to cover the text

I have a nav bar with 3 links. I want each link to take up an equally distributed amount of space when the user hovers over the link. Basically want the entire li element to highlight, not just enough space to cover the text. http://codepen.io/sandyngomez/pen/rVRZqE?editors=110

1 Answer

Jeff Lemay
Jeff Lemay
14,268 Points

You'll need to remove the top and bottom margin from the unordered list (nav ul) and then add that space as padding on the list items instead.

nav ul {
    margin:0;
}
nav ul li {
    padding: 1em .5em;
}

You already had .5em of padding around the list items so I just added another .5 to the top and bottom.