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 Brandon Brigham
Brandon Brigham
3,716 Points

Menu hover element is off and can't seem to find class to adjust.

When you hover over my menu bar at http://villa-terrazzo.com/2014NewSite the size of the hover element is larger than the actual menu height. Can't seem to find which class to adjust...

Any ideas?

Thanks!

4 Answers

Luke Lee
Luke Lee
7,577 Points
Luke Lee
Luke Lee
7,577 Points

Hi Bradon: What do you wanna achieve. Looks fine to me. Only thing you need to do is adjust the .primary-navigation a height when hover it.

jaredcowan
jaredcowan
11,808 Points
jaredcowan
jaredcowan
11,808 Points

When you hover over the link the background image that you set is 100x43px and since that text is in the middle the background picture is dropping below the div This is the code that I found is causing the issue.

media="all"
@media screen and (min-width: 783px)
.primary-navigation li:hover > a, .primary-navigation li.focus > a {
background-color: #643e15;
color: #fff;
height: 43px;

Change the height from 43px to 20px and it fixes the problem

Brandon Brigham
Brandon Brigham
3,716 Points

Thank you Jared!

jaredcowan
jaredcowan
11,808 Points
jaredcowan
jaredcowan
11,808 Points

As for the other link items seem to be the same problem. When you hover over there is to much padding on the bottom.

Brandon Brigham
Brandon Brigham
3,716 Points

Yeah I can't seem to figure out the dropdown items from the same menu. When I hover over them they expand way too much. Do you see that?

Luke Lee
Luke Lee
7,577 Points
Luke Lee
Luke Lee
7,577 Points

In your css

.primary-navigation ul ul a:hover, .primary-navigation ul ul li.focus >a 
{
height:43px; //delete this height
}