Rollover im Menue Mehrspaltig

telino

Hallo WP-Gemeine,

ich sucher verzweifelt die Lösung um das WP 3.0 Menü
mehrspaltig darzustellen. (siehe Bild)
Ich hätte gern die Lösung rechts im Bild. :confused:

muss ich das mit css machen oder in der header.php definieren.
hat jemand einen Quellcodeschnipsel für mich?

Ich bedanke mich im Vorraus für Eure Hinweise, links und Tips!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Marvin_S

ul doppelt so breit machen wie ein li element ist. LI's nach links floaten .
Dann soltlen sie 2 spaltig ausgerichtet sein.

also Beispiel
Der link ist 150px breit.
ul wird 300px
li wird links gefloatet

HTML

ul { 
width:300px;
margin:0;
padding:0;
}
ul li {
float:left;
width:150px;
}

telino

:-?

Zitat von Marvin_S

ul doppelt so breit machen wie ein li element ist. LI's nach links floaten .

funzt leider nicht.

HTML

/* =Menu
-------------------------------------------------------------- */
#access {
 background: #F5F5F5;
 margin: 0 auto;
 width: 940px;
 display:block;
 float:left
}
#access .menu-header,
div.menu {
 font-size: 13px;
 margin-left: 12px;
}
#access .menu-header ul,
div.menu ul {
 list-style: none;
 margin: 0;
}
#access .menu-header li,
div.menu li {
 float:left;
 position: relative;
}
#access a {
 display:block;
 text-decoration:none;
 color:#999999;
 line-height:28px; padding-left:10px; padding-right:10px; padding-top:0; padding-bottom:0
}
#access ul ul {
 display:none;
 position:absolute;
 top:29px;
 left:0;
 float:left;
 box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
 -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
 -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
 width: 360px;
 z-index: 99999;
}
#access ul ul li {
 min-width: 360px; 
}
#access ul ul ul {
 left:100%;
 top:0;
}
#access ul ul a {
 background-position: 0% 0%; height:auto;
 line-height:1em;
 padding:5px;
 width: 360px; color:#999999; 
 background-image:url('images/durch1.gif')
}
#access li:hover > a{
 color:#000000;
 background:#FFFFFF;
 color:#000000; background-image:url('images/gruen_bg.jpg')
}
#access ul ul :hover > a {
 color:#000000;
 background:#FFFFFF;
}
#access ul li:hover > ul {
 display:block; 
 }
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
 color: #888888;
 }
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
 color:#fff;
}

Alles anzeigen

Morris

Zitat von Marvin_S

Dann soltlen sie 2 spaltig ausgerichtet sein.

Das stimmt nicht.

Wenn die <li>s gefloatet werden, werden Zeilen und nicht Spalten erzeugt. Sieht zwar ähnlich aus, ist aber etwas komplett anderes.

Mit Float würde es so aussehen:

Code

1  2  3
4  5  6
7  8

Gewünscht ist aber (laut Bild):

Code

1  4  7
2  5  8
3  6

Das geht nicht so ohne Weiteres. Da müsste bei der Generierung des Menüs via PHP der Aufbau komplett umstrukturiert werden.

Gruß
Mo

Marvin_S

Oups, hast ja recht.
Oder als Tabelle ausgeben, oder ebend mit
1 2
3 4
5 6

zufrieden geben.
Hier jedoch mal ein Beispiel ;)

http://test.schlusen.net/

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Rollover im Menue Mehrspaltig

Jetzt mitmachen!