Ich habe folgende ul und li-Struktur und auf Hover Anker-Tag Ich möchte ul Elemente als Dropdown-Menü anzeigen. Zeige Dropdown-Menü auf Hover von Anker-Tag
.mainmenu li a:hover ul.submenu { display:block;}
Obwohl dieser Code die Frage beantworten kann, zusätzliche Kontext in Bezug auf _why_ und/oder _how_ es Antworten bietet die Frage würde erheblich verbessern seine langfristige Wert. Bitte [bearbeiten] Sie Ihre Antwort, um eine Erklärung hinzuzufügen. –
Ich habe die Struktur für Sie auf jsfiddle gebaut. Als Sie speziell nach dem Hover-Ereignis auf dem Anker-Link gefragt haben, habe ich es für Sie als solches aufgebaut.
Hier ist die Geige: https://jsfiddle.net/mcz4u8pg/1/
Und hier ist der Code:
#main {
list-style: none;
margin: 0;
padding: 0;
}
#main > li {
float: left;
padding: 5px 10px;
border: 1px solid red;
margin: 10px;
}
.sub {
display:none;
}
li > a:hover ~ .sub {
display:block
}
.sub {
clear:both;
list-style:none;
margin:0;
padding:0;
}<ul id="main">
<li><a href="">1</a></li>
<li><a href="">2</a>
<ul class="sub">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
</ul>
Wenn Sie Hilfe mit dem CSS-Code benötigen, würde ich zunächst vorschlagen, eine Mock-Umgebung auf jsfiddle zu schaffen. net - dies würde es für jemanden einfacher machen, Styles auf Ihrem Code anzuwenden und zu testen. – Frits
Was ist Ihre HTML-Struktur, CSS-Struktur? –
Hallo Pankaj - Haben Sie geschafft, das zu bekommen, was Sie gesucht haben? Haben unsere Antworten geholfen? Bitte denken Sie daran, uns Feedback zu geben und/oder unsere Antworten als akzeptiert zu markieren. Wenn Sie immer noch stecken bleiben, schreiben Sie einen Kommentar und wir helfen Ihnen weiter! – Frits