CSS-Hilfe bei Wordpress Dropdown Menü

koma05 · 12.01.2011

habe in wordpress ein theme, dass kein dropdown im menü unterstützt.

denke aber, dass es mit ein paar css-zeilen machbar sein müsste, da der code vorhanden ist. habe das menü mal mit firebug untersucht. siehe bild:

das menü ist ja in folgender form aufgebaut:

Code:

<ul id="menu-mymenu" class="menu">
  <li>menu1
  <ul class="sub-menu">
    <li>sub1
    <li>sub2
  </ul>
  </li>
 ....

würde mich freuen wenn mir jemand bei den css-regeln helfen würde...

call112 · 12.01.2011

AW: CSS-Hilfe bei Wordpress Dropdown Menü

Hast du einen Link zur Seite? Bin zwar mehr mit Joomla unterwegs, aber meist ist es für einen Experten einfacher sich das selber anzuschauen und eben gleich über die Änderungen in Firebug anschauen zu können!

fexx · 12.01.2011

AW: CSS-Hilfe bei Wordpress Dropdown Menü

Code:

#mymenu li:hover ul { display:block; }

koma05 · 12.01.2011

AW: CSS-Hilfe bei Wordpress Dropdown Menü

ohh.. vergessen.. hier ist die

Bleccer · 12.01.2011

AW: CSS-Hilfe bei Wordpress Dropdown Menü

gib dem ul vom submenü eine position, also left: -99999px;
und mach das display: none; weg

und dann mach ein eine neue zeile also

ul li ul:hover {
left: auto;
}

sollte klappen wenn ich nichts vergessen habe ist nur kurz hingeschrieben

PS: du hast übrigens display: none verwendet generell auch gut aber left: -9999; unterstützen ältere Browser

koma05 · 17.01.2011

AW: CSS-Hilfe bei Wordpress Dropdown Menü

danke für die antworten.
aber mit

Code:

#menu ul li ul
{
  /*display:none;*/
left: -99999px;
}

ul li ul:hover {
left: auto;
}

geht es leider nicht.

neben dem ersten menüpunkt (welcher die untermenüs enthält) ensteht eine lücke. siehe screen.

ist zwar ein zeichen, dass was passiert, aber man sieht die untermenüs nicht.

hier ist der css-code etwas übersichtlicher für das menü:

Code:

#menu
{
  position:absolute;
  width:690px;
  margin:0;
  padding:0;
  height: 31px;
  overflow: hidden;
}

#menu ul
{
  font-size:1.2em;
  list-style:none;
  margin:0;
  padding:0;
}

#menu li
{
  float:left;
  border-bottom:0;
}

#menu li a
{
  color:#fff;
  margin-left:.5em;
  display:block;
  padding:.6em .6em .3em;
}

#menu li a:hover
{
  background:#7aafcb;
  color:#fff;
}

#menu ul li ul
{
  display:none;
}

Bleccer · 17.01.2011

AW: CSS-Hilfe bei Wordpress Dropdown Menü

Dann probier es einfach so

ul li ul {
display: none;
}

ul li ul:hover {
display: block;
/* oder display: inline; */
}

musst ausprobieren weiß gerade ned ob inline oder block^^

PS: gib dem ul li ul auch noch ein position: absolute;

koma05 · 17.01.2011

AW: CSS-Hilfe bei Wordpress Dropdown Menü

habs eingebaut, aber funktioniert leider nicht.
hab das mal zum online überarbeiten hier eingestellt:

Bitte kostenlos registrieren, damit du die Links siehst.

Bleccer · 17.01.2011

AW: CSS-Hilfe bei Wordpress Dropdown Menü

HTML:

/*************************************
 +Menu
 *************************************/
#menu
{
  position:absolute;
  width:690px;
  margin:0;
  padding:0;
  height: 31px;
  overflow: hidden;
    background-color:#123;
}

#menu ul
{
  font-size:1.2em;
  list-style:none;
  margin:0;
  padding:0;
}

#menu li
{
  float:left;
  border-bottom:0;
}

#menu li a
{
  color:#fff;
  margin-left:.5em;
  display:block;
  padding:.6em .6em .3em;
}

#menu li a:hover
{
  background:#7aafcb;
  color:#fff;
}

#menu ul li ul
{
  display:none;
position: absolute;
}

#menu ul li ul:hover {
display: inline;
/* oder display: inline; oder block */
}

.sub-menu {
    left: -9999px;
    position: absolute;
}

.sub-menu:hover {
    left: auto;
}

.sub-menu li {
    float: none;
}

So probiers jetzt mal habs editiert

Wie speicher ichs hab?

koma05 · 17.01.2011

AW: CSS-Hilfe bei Wordpress Dropdown Menü

auf den button "update"

Bleccer · 17.01.2011

AW: CSS-Hilfe bei Wordpress Dropdown Menü

das speicherts da aber ned aber hab dir oben den Code geschickt

koma05 · 18.01.2011

AW: CSS-Hilfe bei Wordpress Dropdown Menü

ah, ok
hast recht. wenn man auf update klickt so ändert sich der link

Code:

http://jsfiddle.net/gyLX2/2/

dann

Code:

http://jsfiddle.net/gyLX2/3/

usw.

danke für deine hilfe, aber mit deinem zuletzt genannten code funzt es leider auch nicht:

Bitte kostenlos registrieren, damit du die Links siehst.

fexx · 18.01.2011

AW: CSS-Hilfe bei Wordpress Dropdown Menü

Code:

#menu { overflow: hidden; }
#menu ul [B]li:[/B][B]hover[/B] ul [COLOR=#88ff88][B]{[/B][/COLOR]
display: block;
[COLOR=#88ff88][B]}[/B][/COLOR]

Hab`s mal quick`n`dirty verbessert ... styles müssen jetzt halt noch entsprechend angepasst werden ...

Bitte kostenlos registrieren, damit du die Links siehst.

Luziefer · 18.01.2011

AW: CSS-Hilfe bei Wordpress Dropdown Menü

hi,
wenn ich das richtig verstanden habe willste das sich die untermenus nach unten aufklappen.
vieleicht habe ich da was für dich, da ich auch per css dieses menu genommen habe.

.menu{
width:910px;
height:37px;
padding-left:0px;
padding-right:0px;
background:url(../images/menu_bg.png) no-repeat top left;
opacity:1}
ul#Navigation{
margin: 0;
padding:0;
list-style-type:none;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;color:#000000;text-decoration:none;}
ul#Navigation li{
list-style:none;
float:left;/* ohne width - nach CSS 2.1 erlaubt */
position:relative;
display:inline;
height:20px;}
* html ul#Navigation li{/* Korrektur fuer den IE 5 und 6 */
margin-bottom:0em;}
*:first-child+html ul#Navigation li{/* Korrektur fuer den IE 7 */
margin-bottom:0em;}
ul#Navigation li ul{
margin:0;
padding:0;
position:
absolute;
top:20px;
display:none;/* Unternavigation ausblenden */
left:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-style:normal;
font-weight:bold;
color:#000000;}
* html ul#Navigation li ul{/* Korrektur fuer IE 5.x */
left:-1.5em;
lef\t:-0.4em;}
*:first-child+html ul#Navigation ul{/* Workaround fuer den IE 7 */
padding-bottom:0px;}
ul#Navigation li:hover ul{
display:block;}
ul#Navigation li ul li{
float:none;
display:block;
margin-bottom:0px;}
ul#Navigation a, ul#Navigation span{
padding:8px 10px;
text-decoration:none;
font-weight:bold;
color:#000000;}
* html ul#Navigation a, * html ul#Navigation span{
width: 8.6em;/* Breite nach altem MS-Boxmodell fuer IE 5.x */
width:0px;/* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */}
ul#Navigation a:hover, ul#Navigation span, li a.aktuell{
color:#990000;}
ul#Navigation li ul span{/* aktuelle Unterseite kennzeichnen */
background-color:#FFFFFF;}
.div2{
border:1px solid #ffffff;
left:200px;
background-color: #FEF5DE;
padding: 0px;
text-decoration:none;
opacity:0.85;
}

<div id="menuid" class="menu">
<ul id="Navigation">
<li><a href="#" title="text" class="action">text</a></li>
<li><a href="#">text<img src="images/down.gif" alt="down" style="border:0px" /></a>
<ul class="div2">
<li><a href="#" title="text">text</a></li>
</ul>
</li>
<li><a href="#">text<img src="images/down.gif" alt="down" style="border:0px" /></a>
<ul class="div2">
<li><a href="#" title="text">text</a></li>
<li><a href="#" title="text">text</a></li>
<li><a href="#" title="text">text</a></li>
</ul>
</li>
<li><a href="#">text<img src="images/down.gif" alt="down" style="border:0px" /></a>
<ul class="div2">
<li><a href="#" title="text">text</a></li>
<li><a href="#" title="text">text</a></li>
<li><a href="#" title="text">text</a></li>
</ul>
</li>
<li><a href="#">text<img src="images/down.gif" alt="down" style="border:0px" /></a>
<ul class="div2">
<li><a href="#" title="text">text</a></li>
<li><a href="#" title="text">text</a></li>
<li><a href="#" title="text">text</a></li>
<li><a href="#" title="text">text</a></li>
</ul>
</li>
<li><a href="#" title="text">text</a></li>
<li><a href="#" title="text">text</a></li>
<li><a href="#" title="text">text</a></li>
<li><a href="#" title="text">text</a></li>
</ul>
</div>

ich hoffe das ist das was du wolltest, ich habe die änderungen wie Farbe schrift ramen und hintergrund drinne gelassen, musst du wenn es bei dir geht noch abändern.
Für den Teil das man sehen kann das es sich um untermenu handelt habe ich dir noch die eine bild datei mit angehängt das kleine Dreick hier

gruß

koma05 · 18.01.2011

AW: CSS-Hilfe bei Wordpress Dropdown Menü

@Luziefer: werde die ausrichtung erstmal so lassen, da ich auf den verantwortlichen seine meinung warten muss...

fexx schrieb:
Code:

#menu { overflow: hidden; } #menu ul [B]li:[/B][B]hover[/B] ul [COLOR=#88ff88][B]{[/B][/COLOR] display: block; [COLOR=#88ff88][B]}[/B][/COLOR]

Hab`s mal quick`n`dirty verbessert ... styles müssen jetzt halt noch entsprechend angepasst werden ...

Bitte kostenlos registrieren, damit du die Links siehst.

danke! nun wird das submenü angezeigt.

muss später noch eine halbtransperente grafik als hintergrund einfügen.

ein was ist noch nicht so optimal: und zwar wenn die maus vom hauptmenüpunkt aufs untermenü entfernt, so ist der hauptmenüpunkt nicht mehr markiert. siehe screen

hier im "

Bitte kostenlos registrieren, damit du die Links siehst.

" wird der haptmenüpunkt markiert. aber aufder

Bitte kostenlos registrieren, damit du die Links siehst.

nicht.

wie könnte man das noch lösen?

edit: habs fast lösen können... nun fehlt noch der hover-effekt bei den submenüeinträgen...

fexx · 18.01.2011

AW: CSS-Hilfe bei Wordpress Dropdown Menü

weil du den style bei "ul li a:hover" vergibst... indem du mit der maus ins submenü fährst, verlässt du den a-tag ...

Code:

[B]ist:[/B] ul li a:hover { ... }
[B]soll:[/B] ul li:hover a { ... }

du musst aber aufpassen, weil alle die styles auch in deinem submenü übernommen werden. für dieses musst du dann was schreiben ;-)

koma05 · 18.01.2011

AW: CSS-Hilfe bei Wordpress Dropdown Menü

@allen helfern: DANKE!!

nun hauts hin...

finde, dass es so mehr als ok ist..

Bitte kostenlos registrieren, damit du die Links siehst.

Bleccer · 18.01.2011

AW: CSS-Hilfe bei Wordpress Dropdown Menü

wie hast es geschafft?

koma05 · 18.01.2011

AW: CSS-Hilfe bei Wordpress Dropdown Menü

Bitte kostenlos registrieren, damit du die Links siehst.