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

Question

В настоящее время у меня есть section, который является гибкой коробкой. Я пытаюсь открыть раскрывающееся меню, когда я нажимаю на div Vs. К сожалению, этот div находится в теге section, и выпадающее меню не появится.

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

Это изображение раздела.

.line { 
 
    height: 4px; 
 
    flex: 1; 
 
    background: red; 
 
    margin: 0 10px; 
 
} 
 
section { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.home { 
 
    margin-left: 50px; 
 
} 
 
.m { 
 
    margin-right: 30px; 
 
} 
 
.logout { 
 
    margin-right: 50px; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin-top: 20px; 
 
} 
 
.dropDown:hover ~ .dropDownContent { 
 
    display: block; 
 
} 
 
.dropDownContent { 
 
    display: none; 
 
}

<section class="dropDown"> 
 
    <div class="home">Home</div> 
 
    <div class="line"></div> 
 
    <div class="m">Reports</div> 
 
    <div class="m dropDownVs">Vs.</div> 
 
    <div class="logout"> <a href="url"> Log Out </a> 
 
    </div> 
 
</section> 
 

 
<div class="dropDownContent"> 
 
    <ul> 
 
    <li>name 1</li> 
 
    <li>name 2</li> 
 
    <li>name 3</li> 
 
    </ul> 
 
</div>

Бонус: Любые предложения о выравнивании падение вниз прямо под Vs. div и предложения по выбору выпадающих элементов, когда мышь отключена от Vs. div будет оценен. В настоящее время, когда я выхожу из раздела, выпадающее меню исчезает, и пользователь не может ничего выбрать.

Answer 1

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

ul { 
 
    display: flex; 
 
    list-style-type: none; 
 
    margin-top: 20px; 
 
} 
 
ul > li:hover { 
 
    background-color: aqua; 
 
    cursor: pointer; 
 
} 
 
.dropDownVs > ul { 
 
    display: none; 
 
} 
 
.dropDownVs:hover > ul { 
 
    display: flex; 
 
    flex-direction: column; 
 
    padding-left: 0; 
 
} 
 
.home { 
 
    margin-left: 50px; 
 
} 
 
.line { 
 
    flex: 1; 
 
} 
 
.m { 
 
    margin-right: 30px; 
 
} 
 
.logout { 
 
    margin-right: 50px; 
 
}

<ul class="dropDown"> 
 
    <li class="home">Home</li> 
 
    <li class="line"><hr></li> 
 
    <li class="m">Reports</li> 
 
    <li class="m dropDownVs">Vs 
 
    <ul> 
 
     <li>name 1</li> 
 
     <li>name 2</li> 
 
     <li>name 3</li> 
 
    </ul> 
 
    </li> 
 
    <li class="logout"><a href="url">Log Out </a> 
 
    <li> 
 
</ul>

Для получения дополнительных указаний см мое меню здесь:

. (Примечание: Это только основной пример, который я построил некоторое время назад, используя не-гибкий макет Фигурные некоторые аспекты этого могут быть полезны для вас.)

#main-nav > ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    border: 1px solid #999; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 
    
 
#main-nav > ul > li { 
 
    float: left; 
 
    background-color: #000; 
 
} 
 

 
.main-nav-sub { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
    
 
#main-nav > ul > li+li { 
 
    border-left: 1px solid #999; 
 
} 
 
    
 
.main-nav-sub > li { 
 
    border-bottom: 1px solid #999; 
 
    border-right: 1px solid #999; 
 
    border-left: 1px solid #999; 
 
    background-color: #000; 
 
} 
 
    
 
.main-nav-sub > li:first-child { 
 
    border-top: 1px solid #999; 
 
} 
 
    
 
#main-nav > ul > li > a, 
 
.main-nav-sub > li > a { 
 
    text-decoration: none; 
 
    white-space: nowrap; 
 
    display: block; 
 
    color: #fff; 
 
    font-family: verdana, sans-serif; 
 
    font-size: .8em; 
 
    font-weight: bold; 
 
    padding: 10px 20px; 
 
} 
 
    
 
#main-nav > ul > li:hover > a { 
 
    color: #000; 
 
    background-color: #fff; 
 
} 
 
    
 
.main-nav-sub > li:hover > a { 
 
    color: #000; 
 
    background-color: #fff; 
 
} 
 
    
 
.main-nav-sub { 
 
    position: absolute; 
 
    z-index: -999; 
 
    opacity: 0; 
 
    filter: alpha(opacity=0); /* IE older versions */ 
 
     zoom: 1;    /* IE older versions */ 
 
    } 
 
    
 
#main-nav > ul > li:hover > .main-nav-sub { 
 
    z-index: 100; 
 
    opacity: 1; 
 
    filter: alpha(opacity=100); /* IE older versions */ 
 
     zoom: 1;    /* IE older versions */ 
 
     -webkit-transition: all .5s ease-in; 
 
     -moz-transition: all .5s ease-in; 
 
     -ms-transition: all .5s ease-in; 
 
     -o-transition: all .5s ease-in; 
 
     transition: all .5s ease-in; 
 
    }

<nav id="main-nav"> 
 
    <ul> 
 
    <li><a href="#">Menu 1</a></li> 
 
    <li><a href="#">Menu 2</a> 
 
     <ul class="main-nav-sub"> 
 
     <li><a href="#">Menu 2.1</a></li> 
 
     <li><a href="#">Menu 2.2</a></li> 
 
     <li><a href="#">Menu 2.3</a></li> 
 
     <li><a href="#">Menu 2.4</a></li> 
 
     <li><a href="#">Menu 2.5</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Menu 3</a> 
 
     <ul class="main-nav-sub"> 
 
     <li><a href="#">Menu 3.1</a></li> 
 
     <li><a href="#">Menu 3.2</a></li> 
 
     <li><a href="#">Menu 3.3</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Menu 4</a></li> 
 
    <li><a href="#">Menu 5</a> 
 
     <ul class="main-nav-sub"> 
 
     <li><a href="#">Menu 5.1</a></li> 
 
     <li><a href="#">Menu 5.2</a></li> 
 
     <li><a href="#">Menu 5.3</a></li> 
 
     <li><a href="#">Menu 5.4</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>