Submenu Navigation bei Wordpress

[rosaro]

Hallo in die Runde,

ich will gerade auf unsere HP etwas ändern und benutze das underscore_theme für Wordpress. Da es ziemlich blank daher kommt, muss man noch einige Anpassungen machen. Bisher auch alles ganz okay. Allerdings, ärgert mich gerade das Menu, bzw. die Unterpunkte. Diese sollten horizontal dargestellt werden und nicht die als vertikale Liste. Ich bekomme es leider nicht hin....

So sieht der Html aus:

<header id="masthead" class="site-header" role="banner">                                  
<div id="head-logo">                
<nav id="site-navigation" class="main-navigation" role="navigation">                     
<button class="menu-toggle" aria-controls="menu" aria-expanded="false">Primary Menu</button>                  

<h3><div class="menu-menu-1-container">
<ul id="menu-menu-1" class="menu">
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26">
    <a href="http://localhost:8888/wordpress/">HOME</a></li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-11 current_page_item menu-item-has-children menu-item-25">
<a href="http://localhost:8888/wordpress/?page_id=11">SERVICE</a>

<ul class="sub-menu">    
<li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55"><a href="http://localhost:8888/wordpress/?page_id=48">SUB1</a></li> <li id="menu-item-60" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60"><a href="http://localhost:8888/wordpress/?page_id=52">SUB2</a></li>    
<li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"><a href="http://localhost:8888/wordpress/?page_id=50">SUB3</a></li> </ul>
</li>

<li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="http://localhost:8888/wordpress/?page_id=13">NAV3</a></li>
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="http://localhost:8888/wordpress/?page_id=15">NAV4</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://localhost:8888/wordpress/?page_id=17">NAV5</a></li> </ul></div></h3>                 </div>                                     

</nav><!-- #site-navigation -->            
</header><!-- #masthead -->

und so mein CSS:

.main-navigation {
    clear: both;
    display: block;
    float: left;
    width: 100%;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 15px;
    padding-top: 1px;
    margin-left: 33%
}

.main-navigation li {
    float: left;
    position: relative;
    padding-right: 2em
}

.main-navigation a {
    display: block;
    text-decoration: none;
    color: #444
}

.main-navigation ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    float: left;
    position: absolute;
    top: 1.5em;
    left: -999em;
    z-index: 99999;
}

.main-navigation ul ul ul {
    left: -999em;
    top: 0;
}

.main-navigation ul ul a {
    width: 400px;
}

.main-navigation ul ul li {

}

.main-navigation li:hover > a {
    color: #666
}

.main-navigation ul ul :hover > a {
}

.main-navigation ul ul a:hover {
}

.main-navigation ul li:hover > ul {
    left: auto;
}

.main-navigation ul ul li:hover > ul {
    left: 100%;
}

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a {
    border-bottom:#444 solid 2px;
    font-weight:700
}

Vielleicht sieht jemand von Euch ja schnell wo ich auf dem Schlauch stehe

Danke schon mal und
Grüße

R*

 

[Myhar]

Du floatest alle Listenpunkte, wie sollen sie da anders als nebeneinander dargestellt werden?

 

[FlashZange]

Die Unterpunkte sollen horizontal dargestellt werden?
Da musst du wohl an

.main-navigation ul ul li {

}

ran. Listenpunkte werden ja standardmäßig als block-Elemente dargestellt. Also musst du wahrscheinlich sowas wie display:inline-block oder display:inline reinschreiben. Ginge natürlich leichter wenn man das sehen würde und direkt im Firebug oder devtools anschauen könnte.

 

[rosaro]

Sorry...... ich bin nicht so der meister

Also wenn ich das Float bei den LI rausnehme, dann wir das menu aber nicht horizontal dargestellt....@FlashZange: habe ich schon versucht. Geht leider auch nicht: wenn ich
display: inline bei
.main-navigation ul ul li
eintrage...passiert auch nichts, bzw. das:



soweit bin ich mit dem jetztigen Verusch gekommen, nur leider soll das submenue auch horizontal dargestellt werden (und nicht wir jetzt als Block)




Vielleicht ist das verständlciher...

Danke für Hinweise...

 

[rosaro]

Liegt es vielleicht bei dieser ul am absolute?

.main-navigation ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 1.5em;
    left: -999em;
    z-index: 99999;
}

 

[FlashZange]

So, nächster Versuch:

.main-navigation ul ul a {
width: 400px;
display: inline;
}

Das könnte klappen

 

[rosaro]

geht leider auch nicht...hatte ich auch schon probiert.....
Dann kommt das raus:


Aber danke FlashZange...

 

[Enigmon]

Hallo R.,

ich habe mir mal eine simple Html und eine CSS-Datei, auf Basis dessen was Du gepostet hast, erstellt.

Bis auf die oberste Navigationsebene erhalte ich gar kein Ergebnis.
Es erscheint auch kein Hovereffekt (ausser einen Farbwechsel).
Kannst du deinen bisherigen Stand posten?

Ach ja vielleicht hilft dir auch diese Seite weiter:
http://themedemos.dottoro.com/features/menu/horizontal-submenu/

 

[rosaro]

Morgen...

Also ich bin leider nicht weitergekommen...
Ich werde das jetzt alles neu anlegen.

Hat jemand gute Tips / Tutorials für das Erstellen von WP Navigation Menues?
Durch den Code wp_nav_menu(); vergibt WP eigene Classen, mit denen ich etwas kämpfe. Ich weiß, dass man diese auch ändern kann, allerdings bin ich nicht so ein PHP-Freak

Schönen Tag Euch

 

[Enigmon]

Schau mal hier:
Leider sind Englischkenntnisse gefragt.


und hier glaube ich besser für dich auf Deutsch:
http://www.stylaxy.de/2011/11/selbst-erstelltes-menu-in-wordpress-theme-aktivieren/