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 Vlad Legkowski
Vlad Legkowski
9,882 Points

a:hover not covering border (or margin?) when hovering over

Hi guys,

Created a navigation bar, added a:hover selector, but once you over over, the top and bottom line are not covered by a:hover background-color property.

If i look at dev tools, my nav bar is: width is 68px But my anchor in navigation is: Content width 26px + 18px padding top and bottom

So, when I hover over, 62px are changing its colour, but 3px on the bottom and the top are not covered.

How do i make full bar width covered once hover over?

Thanks

Vlad Legkowski
Vlad Legkowski
9,882 Points 
          /*--- Navigation Main ---*/
.nav {
  margin: 0px;
}

ul.topnav {
  display: block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(100,168,165);
}

ul.topnav li {
  float: left;

}

ul.topnav li a {
  display: block;
  text-align: center;
  padding: 18px 20px;
  text-decoration: none;
}


ul.topnav ul.right li {
  padding: 3px 0;
}

/*ul.topnav*/
ul.right {
    float: right;
    list-style-type: none;
}

/*--- Navbar colors ---*/

ul.topnav li a:hover:not(.active) {
  background-color: rgb(80,134,132);
  margin: 0;
}

ul.topnav li a:active:not(.active) {
  background-color: rgb(137,194,192);
}

ul.topnav li a.active {
  background-color: rgb(213,105,92);
}


/*--- Pseudoclasses ---*/

nav a:link {
  color: rgb(55, 64, 78);
  text-decoration: none;
}

a:visited {
  color: rgb(55, 64, 78);
}


/*--- Small Screen view ---*/

@media (max-width: 600px){
  ul.right,
  ul.topnav li {
    float: none;
    text-align: center;
  }

}
  /*
    ul.topnav
    ul.right, 
    ul.topnav li {
    float: none;
    text-align: center;

  }

}*/

/*--- fonts ---*/


#club-name {
  font-family: Bevan;
  font-size: 20px;
  padding: -20px;


}

ul.topnav ul.right li {
  font-family: Pontano Sans;
  font-size: 20px;
  font-weight: bolder;
}
          ```

3 Answers

Vlad Legkowski
Vlad Legkowski
9,882 Points
Vlad Legkowski
Vlad Legkowski
9,882 Points 
          <div class="nav">

<ul class="topnav">
    <li><a id="club-name" class="active" href="index.html">Herculeas</a></li>
  <ul class="topnav right">
    <li><a href="#">The Team</a></li>
    <li><a href="#">Facilities</a></li>
    <li><a href="#">Membership</a></li>
  </ul>
</ul>

</div>
          ```
Mark Pryce
Mark Pryce
8,804 Points
Mark Pryce
Mark Pryce
8,804 Points

Hi

You could just change your padding here to 0

ul.topnav ul.right li {
  padding: 3px 0;
}

not sure if thats what you want?

Good luck.

Mark Pryce
Mark Pryce
8,804 Points

Been messing with your code a bit, try changing 

ul.topnav li a:hover:not(.active) {
  background-color: rgb(80,134,132);
  margin: 0;
}

to 

ul.right li:hover:not(.active) {
  background-color: rgb(80,134,132);
  margin: 0;
}

It seems to have a better outcome. Hope it helped

Vlad Legkowski
Vlad Legkowski
9,882 Points
Vlad Legkowski
Vlad Legkowski
9,882 Points

fixed it by

          ul.topnav li a {
  display: block;
  text-align: center;
  padding: 1px 15px;
  text-decoration: none;
  height: 65px;
  line-height: 70px;
}
          ```