CODEWITHSUNDEEP
cssnavigationhover
shuvonasir
shuvonasir

Reputation: 61

CSS menu moving on hover

The code I was trying is moderate I thought, but in case of hovering on the menu the menu is moving both with the text and the background. I have tried a couple of codes that I found here but that didn't make any change. The code is -

HTML :

<div class="nav">
        <ul>
            <li><a href="#">home</a></li>
            <li><a href="#">about us</a></li>
            <li><a href="#">portfolio</a></li>
            <li><a href="#">contact</a></li>
        </ul>
    </div>

CSS :

    div.nav {
    float: right;
    margin: 50px -120px;
}

div.nav ul{
    display: block;
    width: 480px;
}

div.nav ul li {
    float: left;
    padding: 0 10px;
    list-style-type: none;
}

div.nav ul li a:link, div.nav ul li a:visited {
    color: #1E1E1C;
    font-family: RockwellRegular,arial,helvetica,sans-serif;
    font-weight: bold;
    text-decoration: none;
}
div.nav ul li a:hover{
    background: #e41f4c;
    border: 10px solid #e41f4c;
    border-radius: 5px;
    color: #fff;
}

Can't find any solutions yet!

Fiddle : http://jsfiddle.net/shuvo_nasir/T7Kud/

Upvotes: 1

Views: 7293

Answers (5)

JaisonJE
JaisonJE

Reputation: 66

Try this sample http://jsfiddle.net/jaisonje/8fc3A/ . I have removed the padding from li and added padding in a tag as this is the right way to add hover if there is padding.

HTML:

<div class="nav">
    <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">about us</a></li>
        <li><a href="#">portfolio</a></li>
        <li><a href="#">contact</a></li>
    </ul>
</div>

CSS:

div.nav {
    float: right;
    margin: 50px -120px;
}

div.nav ul {
    display: block;
    width: 480px;
}

div.nav ul li {
    float: left;
    list-style-type: none;
}

div.nav ul li a:link, div.nav ul li a:visited {
    color: #1E1E1C;
    font-family: RockwellRegular,arial,helvetica,sans-serif;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    padding: 5px 10px;
}

div.nav ul li a:hover {
    background-color: #e41f4c;
color: #fff;
}

Upvotes: 1

Pranav Raj S
Pranav Raj S

Reputation: 86

Specify a width for li element It will resolove you problem . You have increased border which in turn increase the size of li elements 

div.nav ul li {
float: left;
padding: 0 10px;
list-style-type: none;

width :100 px; }

http://jsfiddle.net/T7Kud/4/

Upvotes: 0

AUSteve
AUSteve

Reputation: 3248

You've got a border on the link hover but not on the normal state. This changes the width and height. I recommend setting a border on the link normal state with border color of your page background so it's not visible, eg:

div.nav ul li a:link, div.nav ul li a:visited {
    color: #1E1E1C;
    font-family: RockwellRegular,arial,helvetica,sans-serif;
    font-weight: bold;
    text-decoration: none;
    border: 10px solid #ffffff;
}

Upvotes: 0

Sergio
Sergio

Reputation: 28837

Try this:

div.nav {
float: right;
margin: 50px -120px;
}

div.nav ul{
display: block;
width: 480px;
}

div.nav ul li {
float: left;

list-style-type: none;
} 
div.nav ul li a {
padding: 10px 10px;
} 

div.nav ul li a:link, div.nav ul li a:visited {
color: #1E1E1C;
font-family: RockwellRegular,arial,helvetica,sans-serif;
font-weight: bold;
text-decoration: none;
}
div.nav ul li a:hover{
background: #e41f4c;
/*  border: 10px solid #e41f4c;*/
border-radius: 5px;
color: #fff;
}

FIDDLE

Upvotes: 0

Arbel
Arbel

Reputation: 30999

Here's a solution: http://jsfiddle.net/T7Kud/1/

Apply the border size to the atags and make the border color transparent, on hover, just change the border color.

div.nav ul li a:link, div.nav ul li a:visited {
    color: #1E1E1C;
    font-family: RockwellRegular,arial,helvetica,sans-serif;
    font-weight: bold;
    text-decoration: none;
    border: 10px solid transparent;
    border-radius: 5px;
}
div.nav ul li a:hover{
    background: #e41f4c;
    border-color: #e41f4c;
    color: #fff;
}

Upvotes: 4

Related Questions