Выпадающее меню не работает должным образом

Question

Я создал раскрывающееся меню с использованием HTML и CSS.

Он работает нормально, но подменю отображается даже тогда, когда мышь наводится на них, когда они не видны. Я просто хочу, чтобы подменю отображалось, когда мышь зависала в главном меню. Я пользуюсь opacity и z-index функциями. Я не хочу использовать display: none, чтобы скрыть подменю, поскольку я хочу использовать эффекты перехода.

#nav > ul > li { 
 
    position: relative; 
 
    font-size: 40px; 
 
    list-style: none; 
 
    width: 160px; 
 
    height: 50px; 
 
    background-color: orange; 
 
    padding: 4px; 
 
} 
 
#nav > ul > li > ul { 
 
    position: absolute; 
 
    font-size: 20px; 
 
    list-style: none; 
 
    padding: 10px; 
 
    line-height: 40px; 
 
    background-color: #ccc; 
 
    top: 50px; 
 
    opacity: 0; 
 
    z-index: -999; 
 
    transition: 0.5s ease-out; 
 
} 
 
#nav > ul > li:hover > ul { 
 
    opacity: 1; 
 
    z-index: 100; 
 
    top: 60px; 
 
}

<div id="nav"> 
 
    <ul> 
 
    <li><a href="#">Linpaws</a> 
 
     <ul> 
 
     <li><a href="#">Swapnil 1</a> 
 
     </li> 
 
     <li><a href="#">Swapnil 2</a> 
 
     </li> 
 
     <li><a href="#">Swapnil 3</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 

 
</div>

Просьба предложить то, что я должен сделать, чтобы избавиться от этой проблемы.

Answer 1

Вы можете использовать visibility: hidden; и opacity: 0;, чтобы скрыть подменю. Пример:

ul, li { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
ul > li { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
ul > li:hover > ul { 
 
    opacity: 1; 
 
    visibility: visible; 
 
    margin-top: 0; 
 
} 
 
ul > li > a { 
 
    display: block; 
 
} 
 
ul > li > ul { 
 
    display: block; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    background: #eee; 
 
    border: 1px solid #ddd; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    transition: all .3s ease; 
 
    margin-top: 5px; 
 
} 
 
ul > li > ul > li > a { 
 
    display: block; 
 
    text-align: left; 
 
    border-bottom: 1px solid #ddd; 
 
    white-space: nowrap; 
 
    padding: 5px 10px; 
 
    transition: all .3s ease; 
 
} 
 
ul > li > ul > li > a:hover { 
 
    color: #0072bc; 
 
}

<ul> 
 
    <li> 
 
    <a href='#'>Main</a> 
 
    <ul> 
 
     <li> 
 
     <a href='#'>Submenu 1</a> 
 
     </li> 
 
     <li> 
 
     <a href='#'>Submenu 2</a> 
 
     </li> 
 
     <li> 
 
     <a href='#'>Submenu 3</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 2

Закройте свой первый тег <ul>, чтобы заставить его работать.

---

Редактировать Ваша проблема заключается в том, что до тех пор, как мышь парит над #nav > ul > li, отображается подменю, но подменю само по себе является частью этого самого li. Вместо того, чтобы вы могли связать селектор :hover в главное меню a, а затем применить opacity:1 к следующему собрату, например, так:

#nav > ul > li > a:hover + ul { 
    opacity:1; 
    z-index:100; 
    top:60px; 
} 

Может быть read up about the adjacent sibling, если вы не знаете еще.

Обратите внимание, что применение селектора :hover к гиперссылке a приведет к тому, что подменю откроется только тогда, когда мышь находится над фактическим текстом, а не обязательно оранжевым полем, расположенным вокруг него. Вы можете исправить, применяя display:block гиперссылке a и перемещение li специфические свойства к li стайлинга, следующим образом:

#nav > ul > li { 
    position:relative; 
    list-style:none; 
} 
#nav > ul > li > a { 
    display:block; 
    font-size:40px; 
    width:160px; 
    height:50px; 
    background-color:orange; 
    padding:4px; 
} 

Answer 3

Если я правильно понимаю, вы только хотите, чтобы показать подменю, когда пункт главного меню наведен ... это кажется очень странным, но хорошо ... вот способ сделать это:

#nav > ul > li { 
    position: relative; 
    font-size: 40px; 
    list-style: none; 
    width: 160px; 
    height: 50px; 
    background-color: orange; 
    padding: 4px; 
} 

#nav > ul > li:hover > ul { /* <<< moved from below */ 
    opacity: 1;    /* <<< moved from below */ 
    z-index: 100;   /* <<< moved from below */ 
    top: 60px;    /* <<< moved from below */ 
}       /* <<< moved from below */ 

#nav > ul > li > ul, #nav > ul > li > ul:hover { /* <<< selector added */ 
    position: absolute; 
    font-size: 20px; 
    list-style: none; 
    padding: 10px; 
    line-height: 40px; 
    background-color: #ccc; 
    top: 50px; 
    opacity: 0; 
    z-index: -999; 
    transition: 0.5s ease-out; 
} 

... И да ... то, что сказал Waflix ... закрыть уль-тег :)