Я пытаюсь создать анимированное меню CSS3, но сталкиваюсь с проблемой, когда элементы с низким индексом появляются поверх содержащих элементов, что разрушает эффект "скольжения".
HTML-код:
<html>
<head><title>CSS3 Experiments</title></head>
<body class="menu-metal effect-hovermenu">
<div id="main">
<div id="container">
<ul>
<li>
<div class="name"><span>Effect: Hover Menu</span></div>
<div class="short"><span>Display menu on hover</span></div>
<div class="long"><span>A CSS3-transition enabled hover menu based on the design at http://www.webdesignerwall.com/demo/css3-dropdown-menu/ .</span></div>
</li>
</ul>
</div>
</div>
</body>
</html>
Сжатый соответствующий CSS это
.effect-hovermenu #container li {
overflow: visible;
z-index: 5;
position: relative;
}
.effect-hovermenu #container li .short {
position: absolute;
width: 100%;
left: 0%;
top: 5px;
z-index: -1000;
opacity: 1 !important;
color: black;
transition-property: all;
transition-duration: 150ms;
transition-timing-function: ease-in;
visibility: hidden;
}
.effect-hovermenu #container li:hover .short {
left: 110%;
visibility: visible;
}
Рабочая демонстрация проблемы доступна на http://jsfiddle.net/scottrabin/FxZrz/. Я попытался установить свойство position для нескольких элементов, изменив значения z-index, overflow и, наконец, понял, что снимаю в темноте и не подхожу к ответу.
В частности, нежелательный эффект возникает при наведении на элемент; в течение переходного периода текст переключается на visibility: visible;, и он немедленно отображается поверх элемента кнопки. В идеальном случае элемент должен отображаться под ul, поэтому он может выскользнуть из-за «меню».