1
Ich möchte Dropdown-Menüs zu bestimmten Elementen in einer vorhandenen horizontalen Navigationsleiste hinzufügen. Ich habe einige Anpassungen an HTML und CSS vorgenommen, basierend auf den meisten Beispielen, die ich gesehen habe, aber das Menü wird immer noch nicht angezeigt ... wie kann ich die Untermenü-Links unter einem bestimmten Hauptmenü-Link erscheinen lassen wäre ich in der Lage, diesen Hauptmenülink klickbar zu halten? (seine auf http://www.pure-ly.com)Dropdown-Menü aus der vorhandenen Navigationsleiste
HTML
<div class='nav'>
<ul class='menu' id='menu'>
<li id='dropdown'>
<a href='#'>Main Item </a>
<ul class='drop-nav' id='drop-nav'>
<li><a href='#'>Sub Item</a></li>
</ul>
</li>
</ul>
</div>
CSS
*{
margin:0;
padding:0;
outline:0;
}
.nav {
width:101%;
height:auto;
border-bottom:1px solid #eee;
margin:10px auto 5px;
display:inline-block;
}
.menu {
width:auto;
list-style:none;
font:$pagenavifont;
text-align:center;
margin:0 auto;
}
.menu a {
float:left;
color:#999;
text-decoration:none;
text-transform:uppercase;
display: inline;
width:auto;
line-height:36px;
padding:0 37px;
}
.menu a:hover,li.menuhover a{
color:#111;
}
.menu li {
position:relative;
float:center;
display:inline;
left:205px;
width:auto;
}
.menu li {
position:relative;
float:center;
display:inline;
left:205px;
width:auto;
}
.menu li:last-child {
background:none;
}
.menu ul{
display:none;
position:absolute;
top:36px;
left:0;
background:#fbfbfb;
display:none;
list-style:none;
}
.menu ul li{
float:none;
border-top:1px solid #e3e3e3;
border-right:1px solid #e3e3e3;
border-left:1px solid #e3e3e3;
width:auto;
background:none;
}
.menu ul li:last-child {
border-bottom:1px solid #e3e3e3
}
.menu ul li a{
float:none;
display:block;
background:none;
line-height:36px;
min-width:137px;
width:auto;
text-align:left;
padding-left:10px;
color:#444;
}
.menu ul li a:hover{
background:#fdfdfd;
color:#777;
}
.navbar li ul li a {
border-left: 1px solid #1f5065;
border-right: 1px solid #1f5065;
border-top: 1px solid #74a3b7;
border-bottom: 1px solid #1f5065;
}
.dropdown {
position:relative;
}
.drop-nav {
position:absolute;
display:none;
}
.drop-nav li {
border-bottom: 1px solid rga(255,255,255,.2);
}
.dropdown:hover > .drop-nav{
display:block;
}
Vielen Dank, ich habe es in die Klasse für die "Dropdown" ändern, aber der erste Teil der CSS, die ich vor langer Zeit bearbeitet, beeinflussen die doppelten Einträge die Dropdown-Menüs? Ich bin zu müde, um Dinge im Büro zu ... – Vanisha
Die Duplikate scheinen nicht der Faktor. Aber die ID ist wichtig, da dein CSS auf Klasse und nicht auf ID verweist. Deshalb ändert es sich nicht von der Anzeige: keine zu blockieren; Ich habe die Antwort aktualisiert, so dass der Drop-Nav anklickbar ist, während #dropdown: hover. Ich habe nicht viel Zeit damit verbracht, die Positionierung zu fixieren, habe Ihnen aber zumindest gezeigt, wie es funktioniert. –
Ihre Antwort funktioniert gut für einen Unterpunkt, aber wenn ich mehr hinzufüge, ist der Hauptlink nicht mehr anklickbar und Unterobjekte sind nicht in einem Gerade vertikale Linie, könnten Sie vorschlagen, wie Sie das beheben? – Vanisha