HTML + CSS: Список с проблемами подменю

im пытается создать простое меню HTML + CSS с всплывающими окнами подменю.HTML + CSS: Список с проблемами подменю

Если элемент списка имеет дочерний список и получает зависание, появится список дочерних элементов. Это уже работает.

Но я хочу, чтобы родительский элемент находился над списком дочерних элементов. Я попробовал это с z-index и .. не удалось. Ребенок всегда перекрывает родителя.

я пытаюсь сделать это, чтобы сделать всплывающую выглядеть следующим образом:

________ ________ 
|Link 1| |Link 2|______ 
      |-> Sublink 1| 
      |-> Sublink 2| 
      |____________|

Так родительский элемент и потомок не имеют видимых границ между ними, но границы вокруг них.

Это HTML:

<html> 
<head> 
<style type="text/css"> 
a { color: #000; } 

body { background: #444; } 

#mainlist { list-style: none; } 

#mainlist li 
{ 
    float: left; 
    margin-left: 10px; 
    border-top: 1px solid black; 
    border-left: 1px solid black; 
    border-right: 1px solid black; 
    padding: 10px; 
    background: #aaa; 
    display: inline; 
} 

#sublist 
{ 
    background: #aaa; 
    border: 1px solid black; 
    width: 100px; 
    display: none; 
    position: absolute; 
    list-style: none; 
    margin: 0px; 
    padding: 0px; 
    margin-left: -11px; 

} 

#sublist li 
{ 
    border: none; 
    background: #aaa; 
    width: 100%; 
    text-align: left; 
} 

#sublist li:hover { background: #ccc; } 

#mainlist li:hover { z-index: 60; } 

       /* When mainlist li is hovered show the sublist */ 
#mainlist li:hover > #sublist 
{ 
    z-index: 50; 
    display: block; 
} 


</style> 

</head> 
<body> 
    <ul id="mainlist"> 
    <li><a href="#">Testlink 1</a></li> 
    <li><a href="#">Testlink 2</a> 
    <ul id="sublist"> 
    <li>Test 1</li> 
    <li>Test 2</li> 
    </ul> 
    </li> 
    </ul> 
</body> 
</html>

источник

2010-09-09 JohnKa

Вы можете сделать это, немного тонкой настройки вашего CSS. В настоящее время ваш верхний уровень <li> оформляет ваши основные предметы. Невозможно заставить их появляться над #sublist, потому что #sublist является их дочерним элементом (вы не можете поместить дочернего элемента из его родителя).

Исправление заключается в применении стилей верхнего уровня на тегах <a>. Они являются братьями и сестрами по #sublist и так штабелирования их Z-индекс легко:

Как простой демонстрации, добавьте правило в ваш CSS и вы увидите #sublist теперь ниже <a>:

#mainlist li a { 
    padding: 10px; 
    background: red; 
    position: relative; 
    z-index: 60; 
}

Все, что вам нужно сделать, это перевести все правила CSS #mainlist li на номер #mainlist li a.

источник

2010-09-09 14:23:50 Pat

Спасибо, отлично работает. – JohnKa

HTML + CSS: Список с проблемами подменю

ответ

Смежные вопросы