Vertikales Menü mit versteckten Untermenüs

Question

Ich habe dieses vertikale Menü mit versteckten Untermenüs erstellt, aber ich kann das Untermenü nicht anzeigen, wenn der Benutzer sich bewegt. Wie könnte ich das tun? Wie kann ich den Text auch vollständig formatieren lassen, da es sich um Listen handelt, mit denen ich die Kugeln loswerden kann, aber ich kann den Text nicht dorthin bringen, wo die Kugeln früher waren. Ich frage mich auch, wie ich die Breite des "Hauptnavs" am besten einstellen könnte. Ich möchte nichts über den Text außer dem Logo sein. Der Körper der Website wäre neben der Navigation. Ich möchte, dass die Seite des Logos auch mit der linken Seite des Textes übereinstimmt, und ich kann nicht herausfinden, wie das geht. Der rote Rand dient nur zu Testzwecken (offensichtlich).

Hier ist der Link zu meinem codepen.

[BONUS] Ich versuche, meine eigene Website von Grund auf mit WordPress und einem benutzerdefinierten Thema zu erstellen. Wie erstellt man es, so dass das Logo-Bild von der Website-Identitätsregisterkarte in der benutzerdefinierten Seitenleiste stammt? Und nur Text anzeigen, wenn in der Identitätsleiste kein Logo ausgewählt ist. Wäre es eine Wordpress-PHP-Funktion? Außerdem möchte ich, dass das Logo standardmäßig von der Hauptnavigation getrennt ist. Ich habe die Funktion register_nav_menu() in meiner functions.php-Datei und weist der Hauptnavigation ein Menü zu, das auch eine Klassenhauptnavigation enthält. Wie kann ich das Logo standardmäßig über diesem Menü anzeigen lassen? Irgendwelche Tipps dazu würden sehr geschätzt werden. (Wordpress/Codierung Noob hier)

HTML:

<div id="container"> 

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png" class="logo-branding" /> 
<nav id="site-navigation" class="main-navigation"> 
    <ul> 
     <li class="active"><a href="#" class="active">Overview</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Submenu</a></li> 
      <ul class="sub-menu"> 
       <li><a href="#">Item 1</a></li> 
       <li><a href="#">Item 2</a></li> 
      </ul> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</nav> 

CSS:

.main-navigation { 
    bottom: 2%; 
    margin-left: 4%; 
    display: block; 
    float: left; 
    border: 1px solid red; 
    position: fixed; 
    overflow: hidden; 
    width: 15%; 
} 

.main-navigation li, .main-navigation a { 
    list-style-type: none; 
    text-align: left; 
    text-decoration: none; 
    color: black; 
    text-transform: lowercase; 
    font: 16pt helvetica, sans serif; 
    padding: 1%; 
} 

.main-navigation a:hover, .main-navigation .active { 
    color: tan !important; 
    font-weight: bold !important; 
} 

.main-navigation .sub-menu { 
    display: none; 
} 

.main-navigation .sub-menu:hover { 
    display: block; 
} 

#container { 
    height: 10000px; 
} 

.logo-branding { 
    display: block; 
    position: fixed; 
    margin-top: 8%; 
    transform: rotate(90deg); 
    width: 15%; 
} 

JS:

/* No JS */ 

Answer 1

Ich glaube, dass this Ihr gewünschtes Verhalten ist?

Dazu müssen Sie Ihr ul-Untermenü innerhalb die Li für den Menüpunkt, der angezeigt wird. Dies ist die einzige Änderung, die ich am HTML vorgenommen habe.

Sie können dann eine CSS-Regel hinzufügen, so dass, wenn Sie den Mauszeiger über die li bewegen, die ul untergeordnete Komponente sichtbar wird. d.h.: .main-navigation li:hover {display: block; }.

Der Grund, warum es nicht funktioniert hat, wenn Sie .main-navigation .sub-menu:hover getan haben, ist, weil wenn es nicht angezeigt wird, können Sie nicht darüber bewegen, so dass der Hover-Status nie ausgelöst wird. In der Regel, die ich hinzugefügt habe, wird es ausgelöst, wenn Sie den Mauszeiger über den Inhalt halten, der li enthält.

.main-navigation { 
 
    bottom: 2%; 
 
    margin-left: 4%; 
 
    display: block; 
 
    float: left; 
 
    border: 1px solid red; 
 
    position: fixed; 
 
    overflow: hidden; 
 
    width: 15%; 
 
} 
 
.main-navigation li, 
 
.main-navigation a { 
 
    list-style-type: none; 
 
    text-align: left; 
 
    text-decoration: none; 
 
    color: black; 
 
    text-transform: lowercase; 
 
    font: 16pt helvetica, sans serif; 
 
    padding: 1%; 
 
} 
 
.main-navigation a:hover, 
 
.main-navigation .active { 
 
    color: tan !important; 
 
    font-weight: bold !important; 
 
} 
 
.main-navigation .sub-menu { 
 
    display: none; 
 
} 
 
.main-navigation li:hover ul { 
 
    display: block; 
 
} 
 
#container { 
 
    height: 10000px; 
 
} 
 
.logo-branding { 
 
    display: block; 
 
    position: fixed; 
 
    margin-top: 8%; 
 
    transform: rotate(90deg); 
 
    width: 15%; 
 
}

<div id="container"> 
 

 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png" class="logo-branding" /> 
 
    <nav id="site-navigation" class="main-navigation"> 
 
    <ul> 
 
     <li class="active"><a href="#" class="active">Overview</a> 
 
     </li> 
 
     <li><a href="#">About</a> 
 
     </li> 
 
     <li><a href="#">Submenu v</a> 
 
     <ul class="sub-menu"> 
 
      <li><a href="#">Item 1</a> 
 
      </li> 
 
      <li><a href="#">Item 2</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </nav>

---

EDIT: ich einen Fehler in Bezug auf Wordpress gemacht haben, so löschte ich, dass ein Teil der Antwort, so dass ich jemand nicht irreführen. E. Shio fand jedoch eine link, die es fast Schritt für Schritt erklärt. Ich fasse zusammen, was dieser Link sagt, nur für den Fall, dass er irgendwann gelöscht wird oder die Seiten-URL verschoben wird.

Zuerst überprüfen Sie, ob es ein benutzerdefiniertes Logo gibt, für das Sie has_custom_logo() verwenden. Sie geben dann dieses benutzerdefinierte Logo mit the_custom_logo() aus. Dies ist jedoch ein relativ neues Feature in Wordpress. Um die Abwärtskompatibilität zu gewährleisten, sollten Sie überprüfen, ob die Funktion mit function_exists('the_custom_logo') existiert.Wenn kein benutzerdefiniertes Logo vorhanden war, können Sie den Text ausgeben, der in einer else-Anweisung angezeigt werden soll. Hier ein Beispiel:

if(function_exists('the_custom_logo')) { 
    if(has_custom_logo()) { 
     the_custom_logo(); 
    } else { 
     $blogname = get_bloginfo('name'); 
     echo "<h1>$blogname</h1>"; 
    } 
} 

---

Wenn Sie Fragen zu dem CSS für das Menü, ich bin mehr als glücklich zu helfen! (Ich bin kein Experte in Wordpress obwohl, also kann ich nicht mit irgendwelchen Wordpress spezifischen Dingen helfen, aber ich kann es versuchen! XP)