Dropdown-Menü ohne Untermenüs

Question

Hier ist der Code für meine Dropdown-Taste mit 1 zusätzlichen Ebene.

Wenn ich auf die Schaltfläche klicke, funktioniert es gut, aber wenn ich versuche, in das Dropdown für das Untermenü zu klicken, merke ich, dass etwas nicht stimmt. Alle meine vier Elemente zeigen nur das letzte Untermenü an.

.icon-cadet-left { 
 
    float: right; 
 
} 
 
.dropbtn { 
 
    width: 300px; 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-family: 'Play'; 
 
    font-size: 20px; 
 
    border: none; 
 
    cursor: pointer; 
 
    text-transform: uppercase; 
 
    letter-spacing: 2px; 
 
} 
 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: relative; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 
.dropdown-content a { 
 
    width: 300px; 
 
    color: black; 
 
    font-family: 'Play'; 
 
    letter-spacing: 2px; 
 
    padding: 12px 16px; 
 
    text-decoration: none !important; 
 
    display: block; 
 
    text-align: center; 
 
    border-bottom: 0.1em solid #e1e1e1; 
 
    border-radius: 5%; 
 
    text-transform: uppercase; 
 
    overflow: hidden; 
 
} 
 
#dropdown-submenu { 
 
    display: none; 
 
    background-color: #f9f9f9; 
 
    position: absolute; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    left: 100%; 
 
    top: 0px; 
 
} 
 
#dropdown-submenu a { 
 
    z-index: 1000; 
 
    width: 300px; 
 
    color: black; 
 
    font-family: 'Play'; 
 
    letter-spacing: 2px; 
 
    padding: 12px 16px; 
 
    text-decoration: none !important; 
 
    display: block; 
 
    text-align: center; 
 
    border-bottom: 0.1em solid #e1e1e1; 
 
    border-radius: 5%; 
 
    text-transform: uppercase; 
 
} 
 
.dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 
#dropdown-submenu a:hover { 
 
    background-color: #f1f1f1 
 
} 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 
.dropdown-content:hover #dropdown-submenu { 
 
    display: block; 
 
} 
 
.dropdown:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
}

<div class="pricing-button"> 
 
    <div class="dropdown"> 
 
    <button class="dropbtn">Logo Design</button> 
 
    <div class="dropdown-content animated fadeIn"> 
 
     <a class="span1" href="#">Logo & Identity<i class="fa fa-caret-right icon-cadet-left"></i></a> 
 
     <div id="dropdown-submenu"> 
 
     <a>Logo Design</a> 
 
     <a>Business Cards</a> 
 
     <a>Sationary</a> 
 
     <a>Holiday Doodles</a> 
 
     </div> 
 
     <a class="hover2" href="#">Business & Advertising<i class="fa fa-caret-right icon-cadet-left"></i></a> 
 
     <div id="dropdown-submenu"> 
 
     <a>Sample 01</a> 
 
     <a>Sample 02</a> 
 
     <a>Sample 03</a> 
 
     <a>Sample 04</a> 
 
     </div> 
 
     <a class="hover3" href="#">Website & Digitals<i class="fa fa-caret-right icon-cadet-left"></i></a> 
 
     <div id="dropdown-submenu"> 
 
     <a>Sample 01</a> 
 
     <a>Sample 02</a> 
 
     <a>Sample 03</a> 
 
     <a>Sample 04</a> 
 
     </div> 
 
     <a class="hover4" href="#">Textile Designing<i class="fa fa-caret-right icon-cadet-left"></i></a> 
 
     <div id="dropdown-submenu"> 
 
     <a>Sample 01</a> 
 
     <a>Sample 02</a> 
 
     <a>Sample 03</a> 
 
     <a>Sample 04</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

So ist das, was ich in Ihrem Code geändert:

1. Sie haben ungültig Syntax- Dich nicht mehr id s- Verwendung class es dafür hat.

   Also änderte ich dropdown-submenu zu class.

2. Und statt .dropdown-content:hover #dropdown-submenu Verwendung dieser:

   .dropdown-content a:hover + .dropdown-submenu { 
       display: block; 
   } 
   

   Der angrenzende Geschwister Selektor (+) wählt dropdown-submenu die sofort das Menü a tag folgt.

Angrenzend Geschwister Selektor (+), die das Geschwisterelement auswählt, die unmittelbar folgt. Beispiele siehe here und here.

Lassen Sie mich Ihre Rückmeldung dazu wissen. Vielen Dank!

.icon-cadet-left { 
 
    float: right; 
 
} 
 
.dropbtn { 
 
    width: 300px; 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-family: 'Play'; 
 
    font-size: 20px; 
 
    border: none; 
 
    cursor: pointer; 
 
    text-transform: uppercase; 
 
    letter-spacing: 2px; 
 
} 
 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: relative; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 
.dropdown-content a { 
 
    width: 300px; 
 
    color: black; 
 
    font-family: 'Play'; 
 
    letter-spacing: 2px; 
 
    padding: 12px 16px; 
 
    text-decoration: none !important; 
 
    display: block; 
 
    text-align: center; 
 
    border-bottom: 0.1em solid #e1e1e1; 
 
    border-radius: 5%; 
 
    text-transform: uppercase; 
 
    overflow: hidden; 
 
} 
 
.dropdown-submenu { 
 
    display: none; 
 
    background-color: #f9f9f9; 
 
    position: absolute; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    left: 100%; 
 
    top: 0px; 
 
} 
 
.dropdown-submenu a { 
 
    z-index: 1000; 
 
    width: 300px; 
 
    color: black; 
 
    font-family: 'Play'; 
 
    letter-spacing: 2px; 
 
    padding: 12px 16px; 
 
    text-decoration: none !important; 
 
    display: block; 
 
    text-align: center; 
 
    border-bottom: 0.1em solid #e1e1e1; 
 
    border-radius: 5%; 
 
    text-transform: uppercase; 
 
} 
 
.dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 
.dropdown-submenu a:hover { 
 
    background-color: #f1f1f1 
 
} 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 
.dropdown-content a:hover + .dropdown-submenu { 
 
    display: block; 
 
} 
 
.dropdown:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
}

<div class="pricing-button"> 
 
    <div class="dropdown"> 
 
    <button class="dropbtn">Logo Design</button> 
 
    <div class="dropdown-content animated fadeIn"> 
 
     <a class="span1" href="#">Logo & Identity<i class="fa fa-caret-right icon-cadet-left"></i></a> 
 
     <div class="dropdown-submenu"> 
 
     <a>Logo Design</a> 
 
     <a>Business Cards</a> 
 
     <a>Sationary</a> 
 
     <a>Holiday Doodles</a> 
 
     </div> 
 
     <a class="hover2" href="#">Business & Advertising<i class="fa fa-caret-right icon-cadet-left"></i></a> 
 
     <div class="dropdown-submenu"> 
 
     <a>Sample 01</a> 
 
     <a>Sample 02</a> 
 
     <a>Sample 03</a> 
 
     <a>Sample 04</a> 
 
     </div> 
 
     <a class="hover3" href="#">Website & Digitals<i class="fa fa-caret-right icon-cadet-left"></i></a> 
 
     <div class="dropdown-submenu"> 
 
     <a>Sample 01</a> 
 
     <a>Sample 02</a> 
 
     <a>Sample 03</a> 
 
     <a>Sample 04</a> 
 
     </div> 
 
     <a class="hover4" href="#">Textile Designing<i class="fa fa-caret-right icon-cadet-left"></i></a> 
 
     <div class="dropdown-submenu"> 
 
     <a>Sample 01</a> 
 
     <a>Sample 02</a> 
 
     <a>Sample 03</a> 
 
     <a>Sample 04</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

ich Ihren Code hat = "Drop-Down-Menü" mehrmals gleiche ID gesehen haben, aber das sollte nicht sein. Das Attribut id gibt eine eindeutige ID für ein HTML-Element an (der Wert muss innerhalb des HTML-Dokuments eindeutig sein). Wenn du das mehrmals benötigst, solltest du es als class = "dropdown-submenu" deklarieren, dann musst du .dropdown-submenu statt # dropdown-submenu verwenden.

Bitte korrigieren Sie zuerst Ihre ID Fehler und versuchen Sie es dann. Hoffentlich sollte es funktionieren.

Vielen Dank!