горизонтальное меню:hover с фоном не закрывает слева разделитель

Nailya · May 13, 2013

Всем привет!

Я создала горизонтальное меню: 4 пункта меню на зеленом фоне и между этими пунктами вертикальный разделитель(картинка).

Создала hover c серым фоном, но при наведении курсора фон закрывает все, кроме разделителя слева, который относится к предыдущему пункту.

Попробовала margin-left:-1px; -- при наведении курсора этот маrgin закрывает разделитель слева, но из-за этого немного прыгает все меню.

Как можно сделать так, чтобы и разделитель слева закрывался фоном при наведении курсора и не было никаких сдвигов


.Menu-2 li a {
    display:block;
    min-width:130px;
    height:40px;
    font-weight:bold;
    text-align:center;
    color:#FFF;
    cursor:pointer;
    font-size:14px;
    background: url(/template/menu/menu_1/img/menu_razdelitel.png) no-repeat right;

}
.Menu-2 li a span {
    line-height:36px;
    border-bottom:1px dotted #FFF;

}

.Menu-2 li.select a {
    background: #EDEDED;
    color:#000;
}
.Menu-2 li a:hover {
    background: #EDEDED;
    color:#000;
    margin-left:-1px;

}

red4pony · May 13, 2013


background: url(/template/menu/menu_1/img/menu_razdelitel.png) no-repeat left;

Nailya · May 13, 2013


background: url(/template/menu/menu_1/img/menu_razdelitel.png) no-repeat left;

получилось тоже самое, только теперь при наведении курсора разделитель справа не перекрывается

+ html для полной картины


<body>
<ul class="Menu-2">
  <li><a><span>Текст1</span></a></li>
  <li><a><span>Текст2</span></a></li>
  <li><a><span>Текст3</span></a></li>
  <li><a><span>Текст3</span></a></li>
</ul>

</body>

red4pony · May 13, 2013

Пишу только глупости. :blush: Не слушайте меня

Edited May 13, 2013 by red4pony

Nailya · May 13, 2013

Пишу только глупости. Не слушайте меня

Это очень хорошо, что вы шутите).........но иногда не до шуток(когда срочняк, и когда ты новичок), а так вы мне помогли, спасибо, все получилось

Sign In

горизонтальное меню:hover с фоном не закрывает слева разделитель

Question

Nailya

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

red4pony

Link to comment

Share on other sites

Nailya

Link to comment

Share on other sites

red4pony

Link to comment

Share on other sites

Nailya

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information