CODEWITHSUNDEEP
htmlcss
Jilly Penfield
Jilly Penfield

Reputation: 1

How do I get a nav bar's background color to change when hovering?

This is my code for all of my nav elements

nav a:visited {
color: #ffffff;
}
nav ul {
    list-style-type: none;
    margin-top: -10px;
    margin-bottom: 0px;
    padding-right: 7px;
    padding-left: 15px;
}
nav ul li{
    font-size: 18px;
}
nav ul li:hover {
    background-color: #000000;
}
nav ul li a {
    color: white;
    text-decoration: none;
    font-family: "Century Gothic", Consolas, "Andale Mono", "Lucida Console",     "Lucida Sans Typewriter", Monaco, "Courier New", monospace;

    width: 115px;
    display: block;
    float: left;
    text-align: center;

    font-style: normal;
    font-weight: 400;
    text-decoration: none;

    color: #ffffff;
    text-shadow: 0px 1px #6E6E6E;
    text-transform: uppercase;
    background-color: #003300;
    margin-right: 7px;
    padding-top: 10px;
    padding-bottom: 10px;
}

Why isn't the background of my li changing when I hover over it? I would like to to change to black from dark green. Not the whole ul just each li block. I typed this same code on another site and it worked! This is only a section of my style sheet and I moved it around to all different places in the code to see if my other code was affecting it. How do I fix it?

Upvotes: 0

Views: 33

Answers (1)

Korgrue
Korgrue

Reputation: 3478

Apply the hover state to your anchor. If you want it applied to the ENTIRE navbar, then add a hover state to the entire nav.

HTML:

<nav>
  <ul>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
  </ul>
</nav>

CSS:

nav{

  width:100%;
}

nav ul{
  display:inline-block;
  width:100%;
}

nav ul li{
  display:inline;
}

nav li a{

  background:#fff;
  color:#000;
}

nav li a:hover{
  background:#565656;
  color:red;
}

nav:hover{
background:green;
}

FIDDLE

Upvotes: 1

Related Questions