CODEWITHSUNDEEP
csshtml
Travis
Travis

Reputation: 49

Why isn't the background changing colors when i hover?

HTML

     <nav class="horizontal">
        <ul>
           <li><a href="#">Home</a></li>
           <li><a href="#">Menu</a></li>
           <li><a href="#">Locations</a></li>
           <li><a href="#">Catering</a></li>
           <li><a href="#">About Us</a></li>
        </ul>
     </nav>

     <nav class="vertical">
        <ul>
           <li><a href="#">Pizza</a></li>
           <li><a href="#">Salad</a></li>
           <li><a href="#">Pasta</a></li>
           <li><a href="#">Sandwiches</a></li>
           <li><a href="#">Appetizers</a></li>
           <li><a href="#">Pocket Pizzas</a></li>
           <li><a href="#">Fish &amp; Shrimp</a></li>
           <li><a href="#">Chicken &amp; Wings</a></li>
           <li><a href="#">Beverages</a></li>
           <li><a href="#">Dessert</a></li>
           <li><a href="#">Catering</a></li>
           <li><a href="#">Download Menu</a></li>
           <li><a href="#">Catering Menu</a></li>
        </ul>
     </nav>

CSS:

    nav a {
        text-decoration: none;
    }


 nav.horizontal {

    height: 70px;
    width: 100%;
    background-color: white;



}
 nav.horizontal li {
    font-size: 16px;
    float: left;
    text-align: center;
    background-color: white;
    margin-left: 5px;
    margin-right: 5px;
    width: 180px;
    height: 50px;
    line-height: 50px;
    display: block;

}

nav.horizontal li a:link {
    display: block;
    background-color: red;
    color: white;

    -moz-border-radius: 30px 25px;
    -webkit-border-radius; 30px 25px;
    border-radius: 30px 25px;

    text-decoration: none;

}

nav.horizontal li a:hover {
    background-color: (255, 101, 101);
    color: black;

}

I want the background to change colors when i hover over the think. So far i only have the text changing colors to black, why isnt the background?

Thanks.

Also, if you find any other errors, please let me know!!

Upvotes: 0

Views: 104

Answers (4)

Terry
Terry

Reputation: 66228

Your background-color declaration is invalid:

background-color: (255, 101, 101);

should be:

background-color: rgb(255, 101, 101);

Upvotes: 0

PSR
PSR

Reputation: 40358

you can use the following 

 li:hover

as css selector

Upvotes: 0

Jeffpowrs
Jeffpowrs

Reputation: 4560

You're missing rgb before your values. It should be :

background-color: rgb(255, 101, 101);

Upvotes: 2

RouteMapper
RouteMapper

Reputation: 2560

Create a selector for list items like so:

nav.horizontal li:hover {
     background-color: (255, 101, 101);
     color: black;
}

If you want the background for a link to change, you need to change the background color of the list item it is contained within. Don't try changing the background color of the anchor tags.

Upvotes: 0

Related Questions