Наведение второго селектора не работает в многоуровневых меню глубины

Я несколько дней боролся, пытаясь заставить это работать, и я начинаю видеть вещи, проплывающие мимо моих глаз, которые еще не были созданы.

Проблема в том, что мне нужно построить многоуровневую систему навигации с НУЛЕМ Java или JQuery, используя ТОЛЬКО CSS и HTML.

Исходный код будет сгенерирован из приложения ASP, поэтому детали навигационной системы будут храниться в базе данных. Поэтому я могу поддерживать значения идентификаторов и все другие реляционные аспекты вне кода.

Основная проблема заключается в попытке найти достаточно информации, чтобы помочь мне понять, как работает действие :HOVER, потому что я не могу заставить другие уровни реагировать на HOVER с основного уровня.

Мне нужно, чтобы меню уровня 2 стали видимыми и отображали только соответствующие параметры при наведении курсора на главное меню. Когда вы наводите курсор на следующий уровень, соответствующие меню также должны открываться.

Пользователь никогда не должен щелкать на сайте более 3 раз, поэтому мне нужно быстро и плавно отображать все параметры, поэтому мне нужно сделать окончательный выбор в этом примере всего одним щелчком мыши — после наведения курсора на каждый вариант.

Пожалуйста помоги.

Мой код CSS:

a {text-decoration:none;}
.L2:before {content:"["}
.L2:after {content:"]"}


.L1{
   width:30em;
   padding:6px;
   margin:6px;
   background-color:cyan;
   border-style:groove;
   width:120px;
   text-align:center;
   position:relative;
   display:inline;
   vertical-align:text-top;
   border-style:groove;
   height:2.5em;
   border-radius:10px 10px 10px 10px;
   z-index:1;
   visibility:visible;
}

.mnuL2 {
border-style:groove;
border-radius:10px 10px 10px 10px;
background-color:cyan;
}
.divider {
border-bottom-style:dashed;
}
    .Level2{
    width:20em;
    height:1.8em;
    visibility:hidden;
}

div[id^=mnu1] {
    position:absolute;
    padding:4px;
    margin:0 10px 0 0;
    display:inline;
    top:1.85em;
    visibility:visible;
}

div[id^=mnu2] {
    position:absolute;
    padding:4px;
    display:inline;
    top:1.85em;
    left:5px;
    /*visibility:visible;*/
}

.Level3 {
    visibility:hidden;
}


div[id^=One] {
    position:relative;
    top:5px;
    left:16px;
    display:list-item;
    /*visibility:visible;*/
    z-index:10;
}

div[id^=Two] {
    position:relative;
    top:5px;
    left:16px;
    display:list-item;
    visibility:visible;
    z-index:10;
}


.L1:hover{
   background:lightgray;
}


.L1:hover div[id^=mnu1]{
   background:lightgray;
   font-style:italic;
}

Мой код HTML

<!DOCTYPE html>
<html>
<head>
    <link href="OneStyle.css" rel="stylesheet" type="text/css" />
</head>


<body>


<div id="NavSys">
    <div class="mnuParent">
       <div class=L1 id=mnu01><a href="#"> One</a></div>
       <div class=L1 id=mnu02><a href="#">Two</a></div>
       <div class=L1 id=mnu03><a href="#">Three</a></div>
    </div>

    <div class="mnuL2">
        <div Class="Level2">
           <div class="L2"  id="mnu11"><a href="#">One-001</a></div>
           <div class="L2" id="mnu12"><a href="#">One-002</a></div>
           <div class="L2" id="mnu21"><a href="#">Two-001</a></div>
           <div class="L2" id="mnu22"><a href="#">Two-002</a></div>
           <div class="L2" id="mnu31"><a href="#">Three-001</a></div>
           <div class="L2" id="mnu32"><a href="#">Three-002</a></div>
         </div>
        <div class="divider"></div>
        <div class="Level3">
           <div class="L3" id="One11"><a href="#">One11</a></div>
           <div class="L3" id="One12"><a href="#">One12</a></div>
           <div class="L3" id="One21"><a href="#">One21</a></div>
           <div class="L3" id="One22"><a href="#">One22</a></div>
           <div class="L3" id="Two11"><a href="#">Two11</a></div>
           <div class="L3" id="Two12"><a href="#">Two12</a></div>
           <div class="L3" id="Two21"><a href="#">Two21</a></div>
           <div class="L3" id="Two22"><a href="#">Two22</a></div>
           <div class="L3" id="Three11"><a href="#">Three11</a></div>
           <div class="L3" id="Three12"><a href="#">Three12</a></div>
           <div class="L3" id="Three21"><a href="#">Three21</a></div>
           <div class="L3" id="Three22"><a href="#">Three22</a></div>
       </div>
    </div>
</div>


</body>
</html>

SeanAchim 20.05.2014 источник

comment

Взгляните на этот ответ (многоуровневая навигация с чистым CSS): stackoverflow.com/a/9101168/2772017 - intCoffee 20.05.2014

Ответы (2)

arrow_upward
0
arrow_downward

Чтобы выполнить эту работу, вам необходимо:

добавьте содержимое уровня внутрь элемента триггера (предпочтительная версия) (нажмите для Fiddle)

arrow_upward
2
arrow_downward

Обычно при создании системы выпадающего меню на чистом CSS элементы подменю будут вложены в родительскую кнопку (каждое меню и подменю обычно размечаются как неупорядоченный список).

То, что вы пытаетесь сделать, никогда не сработает, поскольку вы пытаетесь нацелиться на элемент, который находится выше в DOM, чем элемент, над которым находится курсор. CSS может перемещаться по дереву DOM вниз, но не вверх.

Вот как вы можете создать выпадающее меню на чистом CSS.

Я предположил, что ваша разметка не высечена на камне, и что вы действительно можете перемещать свои меню так, чтобы они были вложены в содержащиеся в них li.

HTML:

<ul class="menu"> <li> <a href="#">One</a> <ul class="menu"> <li><a href="#">Sub1 A</a></li> <li> <a href="#">Sub1 B</a> <ul class="menu"> <li><a href="#">Sub2 A</a></li> <li><a href="#">Sub2 B</a></li> <li><a href="#">Sub2 C</a></li> </ul> </li> <li><a href="#">Sub1 C</a></li> </ul> </li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul>

CSS:

.menu { padding: 0; margin: 0; } .menu .menu { display: none; position: absolute; left: 0; width: 200px; } .menu .menu .menu { left: 100%; top: 0; } .menu li { position: relative; float: left; list-style: none; } .menu .menu li { float: none; } .menu li:hover > .menu { display: block; } .menu a { display: block; border: 1px solid #fff; padding: 10px; background: lightgray; }

А вот скрипт, показывающий это меню в действии: http://jsfiddle.net/x9TnS/

Это элементарное доказательство концепции, и вы найдете множество более подробных руководств, выполнив поиск «выпадающее меню чистого CSS».

Jonathan Nicol 20.05.2014

Наведение второго селектора не работает в многоуровневых меню глубины

Ответы (2)

Вопросы по теме