Кросс-браузерная проблема CSS z-index для ссылок внутри абсолютно позиционированного DIV

Question

Пожалуйста, смотрите http://jsfiddle.net/mithun/nuF2Q/1/

У меня есть структура HTML

<div id='slider'>
    <ul>
        <li> 
            <a class='pride' href="i1.html"> Item 1 </a>
            <div class='info'> 
                <a class='roar' href="i1.html"> Description 2 </a>
            </div>
        </li>
        <li> 
            <a class='pride' href="i2.html"> Item 2 </a>
                        <div class='info'> 
                <a class='roar' href="i1.html"> Description 1 </a>
            </div>
        </li>
        <li>
            <a class='pride' href="i3.html"> Item 3 </a>
             <div class='info'> 
                <a class='roar' href="i1.html"> Description 3 </a>
            </div>
           </li>
        <li>
            <a class='pride' href="i4.html"> Item 4 </a> 
                        <div class='info'> 
                <a class='roar' href="i1.html"> Description 4 </a>
            </div>
         </li>
    </ul>
 <div>

и CSS

#slider {
    width : 400px;
    height: 100px;
    border: 1px solid #bcd;
    background-color: #def;
    position:relative;
    z-index:0 !important;
}

#slider ul{
    margin:0px;
    padding:0px;
    list-style:none;
}

#slider ul li {
    margin:0px;
    padding:0px
    list-style:none;
    width:100px;
    z-index:10;
}
#slider ul li a.pride {
    color: #333;
    display: block;
    text-decoration: none;
    padding: 2px 0px 2px 10px;
}
#slider ul li.active a.pride,
#slider ul li:hover a.pride {
    background-color: #ffff7c;
}    

#slider ul li div.info {
    background-color: #9ab;
    border: 1px solid #ccc;
    display:none;
    position:absolute;
    right: 0;
    top:0;
    z-index:-5;
}
#slider ul li.active div.info,
#slider ul li:hover div.info {
    display:block;
}
#slider ul li div.info a.roar{
    color: #0a0;
    display:block;
    width: 280px;
    height: 80px;
    padding: 10px 10px 10px 30px;
    text-decoration: none;
    z-index:10;
}

Проблема в том, что ссылки внутри Div не могут щелкатьна самом деле они стоят за UL

- обновление

Это происходит только в браузерах Webkit / Gecko

Opera и IE отображают его правильно

Answer 1

Это исправляет это для меня в Firefox и Chrome:

<div id='slider'>
    <ul style="width:100px">

100px не может быть - оптимальная ширина.

Answer 2

здесь

http://jsfiddle.net/nuF2Q/4/

то, что вы сделали неправильно, установило z-index для -5;для div.info, который заставил его попасть под элемент ul, который не давал вам нажимать на ссылки ...

, поэтому я изменил его на 5, а затем установил положение ссылок a.prid в относительное и добавилиндекс 6, чтобы он перекрывал элемент div.info

Answer 3

z-index действует только тогда, когда для элемента установлено свойство 'position', поэтому попробуйте поместить 'position :lative' в элементы с z-index, у которых еще нет этого свойства.1002 * Кроме того, элементы естественным образом складываются в порядке их появления в источнике.Когда элементы перекрываются, один, который появляется позже, будет сложен поверх тех, которые появляются раньше.Поэтому, если вы удалите свойство z-index из всего, что есть в таблице стилей, у вас также должен получиться желаемый результат.