HTML + CSS: список с проблемами подменю - PullRequest
Новая
       39

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

0 голосов
/ 09 сентября 2010

Я пытаюсь создать простое меню 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>

1 Ответ

0 голосов
/ 09 сентября 2010

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

Исправление заключается в применении стилей элементов верхнего уровня к тегам <a>. Это братья и сестры #sublist, поэтому сложить их с z-index просто:

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

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

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

...