CODEWITHSUNDEEP
htmlcss
Jeff P.
Jeff P.

Reputation: 3004

CSS Adjust height of background-color while hovering on weblink (<a> tag)

I'm currently designing a Nav menu that includes ul, li and a elements. I'm trying to produce an effect where hovering over an a tag will only change the background color near the text for the link itself instead of the whole li area around it.

HTML:

 <nav>
    <div class="full_menu">
    <ul>
        <li><a href="#">Login</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#" class="drop">Our Team</a>
            <ul>
                <li><a href="#">Bob</a></li>
                <li><a href="#">James</a></li>
                <li><a href="#">Tom</a></li>
            </ul>
        </li><!--End team dropdown  -->
    </ul> 
    </div>

CSS:

nav {
   margin:0 auto;
   text-align:center;
}

nav ul ul {
   display: none;  
}

nav ul li:hover > ul {
   display:block;
}

nav ul {
  background: #17A74A;
  padding:0px;
  list-style:none;
  position:relative;
  display: inline;
  border:0px;
}

nav ul li {
  float:right;
  margin-top:0px;
}

nav ul li a {
  display:block;
  padding:33px 40px;
  color:#000;
  text-decoration:none;
  font-weight:bold;
  font-size:18px;
}

nav ul li a:hover {
  background-color:#2D6AF7;
  color:#FFF;
}

nav ul ul {
  background:#17A74A;
  position:absolute;
  top:71px;
}

nav ul ul li {
  float:none;
  border-bottom:1px solid #FFFFFF;
}

nav ul ul li a {
  padding:15px 40px;
  color:#FFF;
}

nav ul ul li a:hover {
  background:#27BCDD;
}

nav ul ul ul {
  position:absolute;
  left:100%;
  top:0;
}

I thought that by using nav ul li a:hover would fix this problem but the whole li area is still changing its background color instead of just the immediate area around the link text.

Any help would be greatly appreciated!

Upvotes: 0

Views: 2331

Answers (2)

Dillon
Dillon

Reputation: 707

You need to change the padding to a margin if you don't want the whole thing to change color. Try this:

    nav ul ul li a {
  margin:15px 40px;
  color:#FFF;
}

Upvotes: 0

Ramiz Wachtler
Ramiz Wachtler

Reputation: 5683

Do you want to achieve following result? I've removed the padding from your <a> elements and added them to the <li> elements instead.

JSFiddle

Upvotes: 1

Related Questions