CSS-меню, перемещающееся по ходу

Question

Код, который я пытался, умеренный, я думал, но в случае зависания в меню меню перемещается как с текстом, так и с фоном. Я попробовал пару кодов, которые я нашел здесь, но ничего не изменил. Код -

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; 
} 

Не можете найти решения еще!

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

Answer 1

Вот решение: http://jsfiddle.net/T7Kud/1/

Применить размер границы к a тегов и сделать цвет границы прозрачны, при наведении курсора мыши, просто изменить цвет границы.

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; 
} 

Answer 2

Попробуйте это:

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

Answer 3

У вас есть границы на парении ссылки, но не на нормальном состоянии. Это изменяет ширину и высоту. я рекомендую установить границу по линии нормального состояния с границей цветом фона страницы, так что это не видно, например:

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; 
} 

Answer 4

Укажите ширину элемента Li Это resolove вам проблему. Вы увеличили границу, которая, в свою очередь увеличить размер Li элементов

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

ширина: 100 точек; }

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

Answer 5

Попробуйте этот образец http://jsfiddle.net/jaisonje/8fc3A/. Я удалил прописку из li и добавил прописку в тег, так как это правильный способ добавить зависание, если есть отступы.

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; 
}