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 Abe Layee
Abe Layee
8,378 Points

Need help solving this hover bug

I want when you hover on the nav menu, i want it to cover the whole section of nav element. Here is my codepen link http://codepen.io/anon/pen/zGMmLa

I want something like this website when you hover over it http://www.awwwards.com/websites/portfolio/

7 Answers

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi Abraham,

One way to achieve this result is to use line-height for the li elements. Below are the style rules I changed.

nav {
  margin-right: 5%;
  position: relative;
  /*top: 20px;*/
}

nav li {
  display: inline-block;
  /*margin: 0 20px;*/
  padding: 0 20px;
  line-height: 50px;
  float: left;  
}

By setting line-height equal to the height of the header, nav no longer needs to be offset from the top by 20px. Replaced margin with padding so that on hover there will be no gap between elements.

josue exhume
josue exhume
20,981 Points
josue exhume
josue exhume
20,981 Points

Hi there Abraham, this is what i did to have it working the way you mentioned, i took out some stuff from your css also.

here the jsfiddle for it: https://jsfiddle.net/exhumejosue/xrL95m3h/

I put your logo inside a div, it's not necessary but it makes for a better flow than to just have the anchor tag by it self right there

<header>
  <div class="container"> <!-- new div -->
      <div id="logo_container">
    <a href="" id="logo">Logo</a>
      </div>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

I added a new class in there

/*Logo*/

#logo {
  color: snow;
  font-weight: 300;
  text-decoration: none;
  display: inline-block;
  padding: 17px;
}
/*Navigation Menu*/

nav {
  margin-right: 5%;
}

nav li a {
  color: snow;
  text-decoration: none;
  text-align:center;
  display: inline-block;
  padding: 16px;
}

nav li {
  display: inline-block;
  float: left;
}

nav ul {
  float: right;
}

//NEW CLASS
#logo_container{
   margin-left: 5%;
    float:left;
    height: 50px;
    width: 70px;
}

sorry for the long post, but i hope that this is what you meant.

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

What I like about your solution is that it expands the clickable area for the a tag. Mine does not do this, resulting in a small clickable area.

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,863 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,863 Points

Hey Abraham,

This will do what you want (I think), but I'm sure there is a much easier way to do. Right now, my CSS is a little rusty and I can't think of it, but I'm sure there is. For now...

nav li {
  display: inline-block;
  margin: -20px 10px 20px 20px;
  float: left;
  padding: 16px 10px;
}

Good Luck and Keep Coding! :)

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

Thank you very much Jason Anders ... I appreciate your help

Jason Anders
Jason Anders
Treehouse Moderator 145,863 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,863 Points

You are very welcome, but I think Robert's does it a bit better.

And Thank-you for all your contributions in the forum!

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

Thank you Robert Richey. Css is a lot tricky . I am always getting confuse with css when laying out website.

Jason Anders
Jason Anders
Treehouse Moderator 145,863 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,863 Points

It's a learning process...

I think Robert deserves "Best Answer" on this one though.

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

I agree, CSS can be very tricky when trying to design a page while developing it. By taking some time to plan the layout before writing code will significantly reduce the complexity.

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

Thank you too I am glad to share what I know with others here at Treehouse.

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

Thanks all. I got it working now cheers!:D