Drop-Down-Funktion Abhängig von der Ausrichtung

Question

Ich habe eine Dropdown-Box auf W3CSchools, die ich in weniger Klassen-orientierte CSS konvertieren möchte (anstatt eine Reihe von Klassen, ich wähle es nur über die primäre Eltern).

Hier ist der HTML:

<nav> 
    <div class="dropdown"> 
     <button class="dropbtn">Dropdown</button> 
     <div class="dropdown-content"> 
      <a href="#">Link 1</a> 
      <a href="#">Link 2</a> 
      <a href="#">Link 3</a> 
     </div> 
    </div> 
</nav> 

(effektiv, sollte ich keine Klassen hier haben müssen)

Hier ist die CSS:

/* Style The Dropdown Button */ 
.dropbtn { 
    background-color: #4CAF50; 
    color: white; 
    padding: 16px; 
    font-size: 16px; 
    border: none; 
    cursor: pointer; 
} 

/* The container <div> - needed to position the dropdown content */ 
.dropdown { 
    position: relative; 
    display: inline-block; 
} 

/* Dropdown Content (Hidden by Default) */ 
.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 

/* Links inside the dropdown */ 
.dropdown-content a { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
} 

/* Change color of dropdown links on hover */ 
.dropdown-content a:hover {background-color: #f1f1f1} 

/* Show the dropdown menu on hover */ 
.dropdown:hover .dropdown-content { 
    display: block; 
} 

/* Change the background color of the dropdown button when the dropdown content is shown */ 
.dropdown:hover .dropbtn { 
    background-color: #3e8e41; 
} 

Alles hier gut funktioniert, wenn umgewandelt bis hin zu Ziel nur durch die nav Element, abgesehen von den funktionalen Sachen:

.dropdown:hover .dropdown-content { 
    display: block; 
} 
.dropdown:hover .dropbtn { 
    background-color: #3e8e41; 
} 

ich versuchen kann, diese in konvertieren

nav > div:hover nav > div > div { 
    display: block; 
} 
nav > div:hover mav > div > button { 
    background-color: #3e8e41; 
} 

Aber nichts passiert. Ich habe sogar versucht, die primäre Elternklasse von .dropdown und den Anfang von nav > div zu entfernen, obwohl es auch nichts zurückgibt.

Was macht den Unterschied? Ich ziele genau auf die gleichen Elemente.

Answer 1

Sie haben einen Tippfehler in nav > div:hover mav > div > button {mav sollte nav sein, also vielleicht, dass Sie Probleme mit dem Testen verursacht haben.

Hier ist der relevante Code ohne Verwendung von Klassen:

/*selects the nav and then select the div that is the immediate child of the nav that is hovered. When that child div is hovered it selects the first div and sets its display type to block*/ 
nav > div:hover > div:first-of-type{ 
    display: block; 
} 
nav > div:hover > button{ 
    background-color: #3e8e41; 
} 

/* Style The Dropdown Button */ 
 
.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 
/* The container <div> - needed to position the dropdown content */ 
 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
/* Dropdown Content (Hidden by Default) */ 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 

 
/* Links inside the dropdown */ 
 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
/* Change color of dropdown links on hover */ 
 
.dropdown-content a:hover {background-color: #f1f1f1;} 
 

 

 
nav > div:hover > div:first-of-type{ 
 
    display: block; 
 
} 
 
nav > div:hover > button{ 
 
    background-color: #3e8e41; 
 
}

<nav> 
 
    <div class="dropdown"> 
 
    <button class="dropbtn">Dropdown</button> 
 
    <div class="dropdown-content"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 
    </div> 
 
</nav>