У меня есть навигация:
<ul>
<li>Button
<div class="sub-container">Sub navigation</div>
</li>
</ul>
Sub-контейнер установлен на непрозрачность 0, а при наведении на непрозрачность LI - на 1. Теперь у меня есть проблема, что суб-контейнер имеет границу, а граница находится поверх исходного элемента LI. Я хочу, чтобы элемент LI находился в верхней части дочернего элемента подконтейнера. Так что они будут выглядеть "слитыми".
Я попробовал решение z-index -1, которое работает PERFECTLY в FireFox, но в Chrome он падает.
Снимок экрана:
Это мой код CSS:
#topBarHeader nav ul.main-nav {
list-style: none;
position: absolute;
left:0;
display: inline-block;
z-index: 100;
}
#topBarHeader nav ul.main-nav > li {
float: left;
display: inline-block;
padding: 15px 17px 10px 17px;
border: 1px solid rgba(255, 255, 255, 0);
margin-right: 10px;
}
#topBarHeader nav li .sub-container {
position: absolute;
top: 49px;
left: 0px;
width: 640px;
opacity: 0;
visibility: hidden;
overflow: scroll;
overflow-x: hidden;
height: 380px;
background: white;
z-index: -1;
border: 1px solid #d5dbdf;
}
#topBarHeader nav li:hover > .sub-container {
opacity: 1;
visibility: visible;
}
Вот ссылка на меню моей страницы. (очень медленно, на плохом сервере.)
Вы должны попытаться объявить position: relative
для родительского элемента <li>
, иначе абсолютное позиционирование может работать неправильно.
Я бы не сказал, что это ошибка с Chrome, но больше похоже на то, как разные браузеры пытаются обрабатывать неоднозначные правила, когда информации недостаточно.
[Изменить]: Думаю, я сейчас понимаю вашу проблему. Хитрость, чтобы верхняя граница исчезла за активной вкладкой, состоит в том, чтобы фактически обернуть содержимое в <li>
, а затем присвоить ему более высокий индекс z по сравнению с раскрывающимся контентом и изменить цвет нижней границы, чтобы он соответствовал фону так что он исчезает.
Вот скрипка как доказательство концепции - http://jsfiddle.net/teddyrised/EPYvq/