CODEWITHSUNDEEP
css
user379888
user379888

Reputation:

Menu background not changing completely

I am developing a menu bar. I amm done but left with the hover action. I am looking for the whole background of the menu to change but the menu background only changes behind the text.

Here is the fiddle.

<div class="nav">
    <ul>
        <li ><a href="#">Zardari</a></li>
        <li><a href="#">Kutta</a></li>
    </ul>
</div>​

Here is the css,

.nav{background:#454545;line-height:1;overflow:hidden;position:relative; padding-top:10px;padding-bottom:10px;   padding-left:10px;}

.nav a{
    color:#fff;text-decoration:none;
    font-style:italic;
    margin-right:10px;
}

    .nav i{position:relative;top:-3px}
    .nav li{float:left;overflow:hidden}
    .nav ul{list-style:none;margin:0;overflow:hidden;padding:0;width:100%}
    .nav .active{background:#454545}
    .nav ul a:hover{
            color:#FFF;
            background:#000;            

    }
​

Thanks in advance.

Upvotes: 0

Views: 114

Answers (3)

MultiformeIngegno
MultiformeIngegno

Reputation: 7049

What about this?

.nav{background:#454545;line-height:1;overflow:hidden;position:relative; padding-top:10px;padding-bottom:10px;   padding-left:10px;}

.nav a{
color:#fff;text-decoration:none;
font-style:italic;
margin-right:10px;
} 

.nav i{position:relative;top:-3px}
.nav li{float:left;overflow:hidden}
.nav ul{list-style:none;margin:0;overflow:hidden;padding:0;width:100%}
.nav .item{display:block;font-family:Oswald,Arial Narrow,Arial,Helvetica,sans-serif;font-size:15.6px;line-height:1;padding:5px 8px;text-transform:uppercase}
.nav .item:hover{background:#454545;color:#FFF}
.nav .active{background:#454545}
.nav:hover{
        color:#FFF;
        background:#000;            

}

​

Upvotes: 0

Fabio
Fabio

Reputation: 2094

I think i achieved what you want by using Jquery. I edited the css in order to remove your attempt of changing the background, that i implemented in Jquery.

CSS:

.nav{background:#454545;line-height:1;overflow:hidden;position:relative; padding-top:10px;padding-bottom:10px;   padding-left:10px;}

.nav a{
    color:#fff;text-decoration:none;
    font-style:italic;
    margin-right:10px;
}

    .nav i{position:relative;top:-3px}
    .nav li{float:left;overflow:hidden}
    .nav ul{list-style:none;margin:0;overflow:hidden;padding:0;width:100%}
    .nav .item{display:block;font-family:Oswald,Arial Narrow,Arial,Helvetica,sans-serif;font-size:15.6px;line-height:1;padding:5px 8px;text-transform:uppercase}​

then in the head of your html file include the Jquery library. You can download it and host it on your server or use Google's CDN for the library, like this:

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>

Now in your HTML body add the jquery functions i coded for you:

$("li").mouseover(function () {
    $(".nav").css("background-color","#000");
});

$("li").mouseout(function () {
    $(".nav").css("background-color","#454545");
});

The background of the nav bar changes when the mouse hover on the li (each button). If this is what you want, it's alright, else if you want something different let me know and i'll change it.

Here you can find a DEMO on jsfiddle

Upvotes: 1

Scrimothy
Scrimothy

Reputation: 2536

Put your padding:10px on your a tag, not the .nav. This way you'll have the entire link area change color from top to bottom. (You also have to add display: block; to your a as well.

.nav a{
  color:#fff;
  text-decoration:none;
  font-style:italic;
  margin-right:10px;
  padding:10px;
  display: block;
}

Fiddle

Upvotes: 2

Related Questions