schweben li und wechseln Geschwister Untermenü

Ich brauche ein wenig Hilfe hier. Ich versuche, ein Menü mit Untermenü zu erstellen, um ohne Javascript oder jquery geöffnet zu sein (nur css, wenn es möglich ist).schweben li und wechseln Geschwister Untermenü

<nav id="container"> 
    <ul> 
    <li><a href="">Link1</a></li> 
    <li class="haschildren selected"> 
    <a>Link2</a> 
    <ul class="submenu"> 
     <li><a href="">Link2-1</a></li> 
     <li><a href="">Link2-2</a></li> 
     <li><a href="">Link2-3</a></li> 
    </ul> 
    </li> 
    <li class="haschildren"> 
    <a>Link3</a> 
    <ul class="submenu"> 
     <li><a href="">Link3-1</a></li> 
     <li><a href="">Link3-2</a></li> 
     <li><a href="">Link3-2</a></li> 
    </ul> 
    </li> 
    </ul> 
</nav>

Wenn ich die Klasse ausgewählt und die Seite geladen habe, ist das ausgewählte .submenu geöffnet. Aber wenn ich den anderen li, der ein Untermenü hat, schwebe, möchte ich, dass das ausgewählte Untermenü verschwindet und das neue erscheint. In meinem Fall kann ich das ausgewählte Untermenü nicht ausblenden, wenn ich den Mauszeiger über Link3 li bewege. Entschuldigung für mein Englisch. Um es deutlich zu machen, möchte ich bei Link3 das Link2-Untermenü ausblenden und das Link3-Untermenü öffnen. Wenn Sie jedoch von Link3 aus den Mauszeiger verlassen, um zum ausgewählten Standard zurückzukehren. Wenn jemand helfen könnte, würde ich es schätzen.

Ich habe hier ein Beispiel gemacht. https://jsfiddle.net/ef8zgogr/

Quelle

2016-07-15 DMande

Sie benötigen den '.selected' Klassennamen nicht, da Sie mit': Hover' pseudostate die gesamte Funktionalität erreichen können, ohne die Klassennamen zu ändern. –

Ich möchte, dass das ausgewählte Menü nach dem Laden der Seite geöffnet ist. Deshalb verwende ich die ausgewählte Klasse – DMande

Wenden Sie eine Anzeige nicht auf die Submenus und dann auf: Bewegen Sie den Mauszeiger über das Parent li (mit der Klasse .hasChildren), um es in den Block zu ändern.

.submenu {display:none} 
 
.selected ul{display:block} 
 

 
#container:hover li ul{display:none} 
 
#container li:hover ul{display:block}

<nav id="container"> 
 
    <ul> 
 
    <li><a href="">Link1</a></li> 
 
    <li class="haschildren selected"> 
 
    <a>Link2</a> 
 
    <ul class="submenu"> 
 
     <li><a href="">Link2-1</a></li> 
 
     <li><a href="">Link2-2</a></li> 
 
     <li><a href="">Link2-3</a></li> 
 
    </ul> 
 
    </li> 
 
    <li class="haschildren"> 
 
    <a>Link3</a> 
 
    <ul class="submenu"> 
 
     <li><a href="">Link3-1</a></li> 
 
     <li><a href="">Link3-2</a></li> 
 
     <li><a href="">Link3-2</a></li> 
 
    </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

Quelle

2016-07-15 08:08:03 gavgrif

. Wenn die Seite geladen ist, möchte ich, dass das ausgewählte Menü geöffnet ist. Wie kann ich das erreichen? und dann nach jedem Hover in den ursprünglichen Zustand zurückkehren – DMande

ok - versuchen Sie dies - es gibt zwei Künste zu ihm - der Anfangszustand, in dem die ausgewählte ul angezeigt wird und die nicht ausgewählte ul ist nicht. Dann werden alle Zeilen mit dem Mauszeiger über der Liste ausgeblendet, mit Ausnahme der Spalte, über der Sie gerade schweben. Wenn Sie dann den #container verlassen, wird der ursprüngliche Zustand wiederhergestellt. – gavgrif

Vielen Dank! – DMande

Aber wenn ich die anderen li schweben, das Untermenü ich möchte das ausgewählte Untermenü

verschwinden hat es keine einfache Art und Weise nahe wechseln die ausgewählte (erweitertes) Untermenü, wenn das andere Untermenü durch gerade css (mehr wie Radioknopf) schwebte.

Quelle

2016-07-15 09:08:25

schweben li und wechseln Geschwister Untermenü

Antwort

Verwandte Themen