Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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
          <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

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

fixed it by

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