So wählen Sie nur ein Kind in einer Klassenliste aus

Question

Ich verwende eine Reihe von Übermittlungsschaltflächen für ein Navigationsmenü (der Übermittlungswert wird die Navigationsmethode für die gesamte Site sein). Ich habe ein Dropdown-Menü mit einem Flyout aus den Dropdown-Menüs erstellt. Ich kann jedoch nicht herausfinden, wie man nur das Element hovered im Dropdown-Menü isoliert, um dessen Flyout anzuzeigen. Alle Dropdown-Elemente zeigen entweder alle Untermenüs oder keine an. Ich habe versucht, die> und + Kind-Selektoren in verschiedenen Bereichen zu verwenden. Kann mir bitte jemand helfen?

Meine CSS:

/* Dropdown Button */ 
.ddb-container { 
width: 100%; 
    overflow: hidden; 
    background-color: #faebca; 
    font-family: Arial; 
    margin-top: 75px; 
    padding-left: 150px; 
    z-index: 1; 
    border-top: 3px black solid; 
    border-bottom: 3px black solid; 
    border-left: none; 
    border-right: none; 
} 

.ddb-container button { 
    margin: 0; 
    padding: 0; 
    float: left; 
    font-size: 14px; 
    border: none; 
    color: #000000; 
    text-align: center; 
    padding: 5px 10px; 
    text-decoration: none; 
    font-weight: bold; 
    background-color: transparent; 
} 

.ddb-container button:hover { 
    background-color: #dbcfa4; 
} 

.ddb-dropdown { 
    float: left; 
    overflow: hidden; 
    font-size: 14px;  
    font-weight: bold; 
} 

.ddb-dropdown .dropbtn { 
    border: none; 
    outline: none; 
    color: #000000; 
    padding: 5px 10px; 
    background-color: transparent; 
} 

.ddb-dropdown .dropbtn:hover { 
    background-color: #dbcfa4; 
} 

.ddb-dropdown .dropdown-level1 { 
    display: none; 
    position: absolute; 
    background-color: #faebca; 
    min-width: 160px; 
    box-shadow: 0px 8px 12px 0px rgba(0,0,0,0.2); 
    z-index: 1; 
} 

.ddb-dropdown:hover .dropdown-level1 { 
    display: block; 
} 

.ddb-dropdown .dropdown-level1 .dropdown-level2 { 
    display: none; 
    position: absolute; 
    background-color: #faebca; 
    min-width: 160px; 
    margin-left: 160px; 
    box-shadow: 0px 8px 12px 0px rgba(0,0,0,0.2); 
    z-index: 2; 
} 

.ddb-dropdown .dropdown-level1:hover .dropdown-level2 { 
    display: block; 
} 

HTML:

<div class='ddb-container'> 
<button type='submit' name='submit' value='0'>Home</button> 
<div class='ddb-dropdown'> 
    <div class='dropbtn'>Sales</div> 
     <div class='dropdown-level1'><button type='submit' name='submit' value='#1'>Link 1</button><br /><br /> 
     <button type='button'>Link 2 ></button><br /> 
      <div class='dropdown-level2'> 
      <button type='submit' name='submit' value='#1'>Sublink 1</button><br /> 
      <button type='submit' name='submit' value='#2'>Sublink 2</button><br /> 
      <button type='submit' name='submit' value='#3'>Sublink 3</button><br /><br /> 
      </div><br /> 
     <button type='submit' name='submit' value='#3'>Link 3</button><br /><br /> 
     <button type='submit' name='submit' value='#4'>Link 4</button><br /><br /> 
     <button type='button'>Link 5 ></button><br /> 
      <div class='dropdown-level2'> 
      <button type='submit' name='submit' value='#1'>Sublink 1</button><br /> 
      <button type='submit' name='submit' value='#2'>Sublink 2</button><br /> 
      <button type='submit' name='submit' value='#3'>Sublink 3</button><br /><br /> 
      </div><br /><button type='submit' name='submit' value='#6'>Link 6</button><br /><br /> 
     </div> 
</div> 

<div class='ddb-dropdown'> 
    <div class='dropbtn'>Purchasing</div> 
</div> 
<div class='ddb-dropdown'> 
    <div class='dropbtn'>Inventory</div> 
</div> 
<div class='ddb-dropdown'> 
    <div class='dropbtn'>Accounting</div> 
</div> 
<div class='ddb-dropdown'> 
    <div class='dropbtn'>Documents</div> 
</div> 
<div class='ddb-dropdown'> 
    <div class='dropbtn'>Tools</div> 
     <div class='dropdown-level1'> 
      <button type='submit' name='submit' value='#1'>Tools Link 1</button><br /><br /> 
      <button type='submit' name='submit' value='#2'>Tools Link 2</button><br /><br /> 
      <button type='submit' name='submit' value='#3'>Tools Link 3</button><br /><br /> 
      <button type='button'>Tools Link 4 ></button><br /> 
       <div class='dropdown-level2'> 
        <button type='submit' name='submit' value='#1'>Sublink 1</button><br /> 
        <button type='submit' name='submit' value='#2'>Sublink 2</button><br /> 
        <button type='submit' name='submit' value='#3'>Sublink 3</button><br /><br /> 
       </div><br /> 
      <button type='submit' name='submit' value='#5'>Tools Link 5</button><br /><br /> 
      <button type='submit' name='submit' value='#6'>Tools Link 6</button><br /><br /> 
     </div> 
    </div> 
<div class='ddb-dropdown'> 
    <div class='dropbtn'>Employees</div> 
</div> 
<div class='ddb-dropdown'> 
    <div class='dropbtn'>Administration</div> 
</div> 

Answer 1

Mit dem HTML haben Sie zur Zeit nicht erhalten können, was Sie mit reinem CSS wollen. Sie würden Javascript benötigen. Refactoring Ihr HTML können wir dies mit CSS tun.

Während es nicht notwendig ist, ersetzen Sie Ihre buttons mit a, macht es mehr Sinn für Navigations-Links zu verwenden, stellen Sie sicher, dass die richtige URL in den href Attribute verwenden.

Wir durch Entfernen der br Tags und mit der benachbarten Geschwister-Selektor (+) den Hover-Effekt erreicht haben könnte, aber wenn sie über das schwebende Untermenüs der vorherigen Geschwister die Schwebe- und das Untermenü verschwinden würde verlieren würde.

Durch Erstellen einer Hierarchie können wir die Untermenüs so aktiv halten, wie sie einen Hover erhalten, also auch ihre Eltern. Verschachtelte Listen sind eine übliche Art, diese Hierarchie zu markieren.

Das Folgende ist eine abgeschnittene Version, um Sie auf Ihrem Weg zu bekommen.

/*Basic List Reset*/ 
 

 
ul.ddb-container, 
 
ul.ddb-container ul { 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 

 
/*Basic Link Reset*/ 
 

 
ul.ddb-container a { 
 
    text-decoration: none; 
 
} 
 

 
ul.ddb-container a:link, 
 
ul.ddb-container a:visited { 
 
    color: #000; 
 
} 
 

 

 
/*Dropdown Magic*/ 
 

 
.ddb-container ul { 
 
    display: none; 
 
} 
 

 
.ddb-container { 
 
    width: 100%; 
 
    overflow: visible; 
 
    background-color: #faebca; 
 
    font-family: Arial; 
 
    margin-top: 75px; 
 
    padding-left: 150px; 
 
    z-index: 1; 
 
    border-top: 3px black solid; 
 
    border-bottom: 3px black solid; 
 
    border-left: none; 
 
    border-right: none; 
 
} 
 

 
.ddb-container > li { 
 
    margin: 0; 
 
    padding: 0; 
 
    display:inline-block; 
 
    font-size: 14px; 
 
    border: none; 
 
    color: #000000; 
 
    text-align: center; 
 
    padding: 5px 10px; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    background-color: transparent; 
 
    position:relative; 
 
    overflow:visible; 
 
} 
 

 
.ddb-container li:hover { 
 
    background-color: #dbcfa4; 
 
} 
 

 
.ddb-dropdown .dropdown-level1 { 
 
    position: absolute; 
 
    background-color: #faebca; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.2); 
 
    z-index: 1; 
 
    text-align:left; 
 
    top:26px; 
 
    left: 0; 
 
} 
 

 
.ddb-dropdown .dropdown-level1 .dropdown-level2 { 
 
    position: absolute; 
 
    background-color: #faebca; 
 
    min-width: 160px; 
 
    margin-left: 160px; 
 
    box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.2); 
 
    z-index: 2; 
 
} 
 

 
.ddb-dropdown ul > li { 
 
padding: 1em 0; 
 
} 
 

 
.ddb-container li:hover > ul { 
 
    display:block; 
 
}

<ul class='ddb-container'> 
 
    <li> 
 
    <a href="#">Home</a> 
 
    </li> 
 
    <li class='ddb-dropdown'> 
 
    <a href="#">Sales</a> 
 
    <ul class="dropdown-level1"> 
 
     <li><a href="#">Link 1</a></li> 
 
     <li><a href="#">Link 2 ></a> 
 
     <ul class='dropdown-level2'> 
 
      <li><a href="#">Link2 Sublink 1</a></li> 
 
      <li><a href="#">Link2 Sublink 2</a></li> 
 
      <li><a href="#">Link2 Sublink 3</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Link 3</a></li> 
 
     <li><a href="#">Link 4</a></li> 
 
     <li><a href="#">Link 5 ></a> 
 
     <ul class='dropdown-level2'> 
 
      <li><a href="#">Link5 Sublink 1</a></li> 
 
      <li><a href="#">Link5 Sublink 2</a></li> 
 
      <li><a href="#">Link5 Sublink 3</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Link 6</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Purchasing</a></li> 
 
</ul>