メニュー全体ではなく、単一メニュー項目をホバリングしたときにドロップダウンしようとしました

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>

ボーナス：直接対下のドロップダウンを揃える上の任意の提案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>