Ich versuche Drop-down zu bekommen, wenn ich einen einzelnen Menüpunkt schwebe, nicht das gesamte Menü

Question

Ich habe derzeit eine section, die eine Flex-Box ist. Ich versuche ein Drop-Down-Menü zu bekommen, wenn ich mit der Maus über die Vs Div. Leider ist dieses div in einem section-Tag und das Dropdown-Menü wird nicht angezeigt.

Die Art und Weise, wie der Code derzeit eingerichtet ist, bewirkt, dass das Dropdown-Menü angezeigt wird, wenn ich mit der Maus über einen Teil des Abschnitts gehe. Ich möchte das Dropdown-Menü nur erscheinen, wenn ich die Maus über die Vs. Div.

Hier ist ein Bild des Abschnitts.

.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>

Bonus: Irgendwelche Vorschläge auf das Drop-down direkt unter dem Vs. Ausrichten div und Vorschläge für die Auswahl der Drop-Down-Elemente, wenn die Maus aus der Vs. div würde geschätzt werden. Momentan, wenn ich den Bereich verlasse, verschwindet das Dropdown und ein Benutzer kann nichts auswählen.

Answer 1

In Ihrem Code haben Sie das Dropdown-Menü als gleichrangig zum Hauptmenü positioniert. Es ist besser, das Dropdown-Menü innerhalb des entsprechenden Hauptmenüpunkts zu verschachteln. Versuchen Sie folgendes:

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>

Weitere Anleitungen finden Sie in meinem Menü hier:

. (Anmerkung: Es ist nur ein einfaches Beispiel baute ich eine Weile zurück nicht-flex Layout mit Figured einige Aspekte davon können hilfreich sein.)

#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>