CODEWITHSUNDEEP
htmlcss
user1052448
user1052448

Reputation: 433

Colored background on hover

I have a navbar that's 30px high. How can I get the background color of the menu item link to fill the entire height of the nav bar on hover? My concern is if I use padding top/bottom if the screen is sized or zoom it will not display properly.

HTML

<nav>
  <li><a href="#">Link</a></li>
</nav>

CSS

nav {
  background-color: #333;
  height: 30px;
  width: 100%;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline;
}

nav ul li a {
  text-decoration: none;
}

nav ul li a:hover {
  background-color: blue;
  padding-left: 10px;
  padding-right: 10px;
}

Upvotes: 1

Views: 75

Answers (3)

Anri&#235;tte Myburgh
Anri&#235;tte Myburgh

Reputation: 13527

Add the following:

nav ul li a {
    height: 30px;
    line-height: 30px;
}

Remove height from nav

Upvotes: 1

worldofjr
worldofjr

Reputation: 3886

You need to set your a element to the full height and use the hover element as you have;

nav ul li a {
    height: 30px; /* or 100% */
    line-height: 30px;
    vertical-align: middle;
    display: inline-block;
}

This should do the trick.

Upvotes: 1

AleshaOleg
AleshaOleg

Reputation: 2211

Do you mean how to color the whole nav? Here it is.

nav {
  background-color: #333;
  height: 30px;
  width: 100%;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline;
}

nav ul li a {
  text-decoration: none;
}

nav ul li a:hover {
  padding-left: 10px;
  padding-right: 10px;
}

nav:hover {
  background-color: blue;
}
<nav>
  <li><a href="#">Link</a></li>
</nav>

Upvotes: 0

Related Questions