試圖讓鼠標懸停時出現下拉菜單項，而不是整個菜單

Question

我目前有一個section這是一個彈性盒。當我將鼠標移到Vs div上時，我試圖得到一個下拉菜單。不幸的是，這個div位於section標籤內，下拉菜單不會出現。

當我將鼠標懸停在該部分的任何部分上時，代碼當前設置的方式會導致出現下拉菜單。我希望下拉菜單隻在鼠標移過Vs. div時出現。

這是本節的圖片。

.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將不勝感激。目前，當我將鼠標移出該部分時，下拉菜單消失，用戶無法選擇任何內容。

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>