Probleme mit Menu

es geht nicht ob mir danach ist, es geht darum ob man dass so machen muss oder ob es anderster geht
 
Es geht nicht anders, wenn es sich um ein Dropdown mit mehreren Submenüebenen handelt.

mfg Maik
 
wenns nicht anderster geht, dann ok.

so schauts dann danach aus:
http://ttc-tobi.bplaced.net/neues_design_1/

nunja, ein wenig besser, aber die ganzen weiteren untrermenus machen noch probleme:
http://ttc-tobi.bplaced.net/neues_design_1/
wie kann ich das problem angehen?

CSS: 
.preload2 {background: url(grafiken_navi/button4.gif);}
.menu2 {padding:0 0 0 1px; margin:0; list-style:none; height:35px; background:#fff url(grafiken_navi/button1a.gif) repeat-x; position:relative; font-family:arial; }
.menu2 li.top {display:block; float:left; position:relative;}
.menu2 li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:12px; font-weight:bold; padding:0 0 0 3px; cursor:pointer;}
.menu2 li a.top_link span {float:left; display:block; padding:0 17px 0 12px; height:40px;}
.menu2 li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(grafiken_navi/down.gif) no-repeat right top;}
.menu2 li a.top_link:hover {color:#fff; background: url(grafiken_navi/button4.gif) no-repeat;}
.menu2 li a.top_link:hover span {background:url(grafiken_navi/button4.gif) no-repeat right top;}
.menu2 li a.top_link:hover span.down {background:url(grafiken_navi/button4a.gif) no-repeat right top;}

.menu2 li:hover > a.top_link {color:#fff; background: url(grafiken_navi/button4.gif) no-repeat;}
.menu2 li:hover > a.top_link span {background:url(grafiken_navi/button4.gif) no-repeat right top;}
.menu2 li:hover > a.top_link span.down {background:url(grafiken_navi/button4a.gif) no-repeat right top;}


.menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

.menu2 a:hover {visibility:visible;}
.menu2 li:hover {position:relative; z-index:200;}

/* keep the 'next' level invisible by placing it off screen. */
.menu2 ul,
.menu2 :hover ul ul,
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu2 :hover ul.sub_mannschaften {left:2px; top:35px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:83px; height:auto;}
.menu2 :hover ul.sub_mannschaften li {display:block; height:20px; position:relative; float:left; width:90px;}
.menu2 :hover ul.sub_mannschaften li a {display:block; font-size:14px; height:20px; width:77px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu2 :hover ul.sub_mannschaften li a.fly {background:#fff url(grafiken_navi/arrow.gif) 80px 7px no-repeat;}
.menu2 :hover ul.sub_mannschaften li a:hover {background:#4ab; color:#fff;}
.menu2 :hover ul.sub_mannschaften li a.fly:hover {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul li:hover > a.fly {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu2 :hover ul.sub_turniere {left:2px; top:35px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:175px; height:auto;}
.menu2 :hover ul.sub_turniere li {display:block; height:20px; position:relative; float:left; width:90px;}
.menu2 :hover ul.sub_turniere li a {display:block; font-size:14px; height:20px; width:154px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu2 :hover ul.sub_turniere li a.fly {background:#fff url(grafiken_navi/arrow.gif) 80px 7px no-repeat;}
.menu2 :hover ul.sub_turniere li a:hover {background:#4ab; color:#fff;}
.menu2 :hover ul.sub_turniere li a.fly:hover {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul li:hover > a.fly {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu2 :hover ul.sub_termine {left:2px; top:35px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:109px; height:auto;}
.menu2 :hover ul.sub_termine li {display:block; height:20px; position:relative; float:left; width:90px;}
.menu2 :hover ul.sub_termine li a {display:block; font-size:14px; height:20px; width:103px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu2 :hover ul.sub_termine li a.fly {background:#fff url(grafiken_navi/arrow.gif) 80px 7px no-repeat;}
.menu2 :hover ul.sub_termine li a:hover {background:#4ab; color:#fff;}
.menu2 :hover ul.sub_termine li a.fly:hover {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul li:hover > a.fly {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu2 :hover ul.sub_presse {left:2px; top:35px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:64px; height:auto;}
.menu2 :hover ul.sub_presse li {display:block; height:20px; position:relative; float:left; width:90px;}
.menu2 :hover ul.sub_presse li a {display:block; font-size:14px; height:20px; width:58px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu2 :hover ul.sub_presse li a.fly {background:#fff url(grafiken_navi/arrow.gif) 80px 7px no-repeat;}
.menu2 :hover ul.sub_presse li a:hover {background:#4ab; color:#fff;}
.menu2 :hover ul.sub_presse li a.fly:hover {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul li:hover > a.fly {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu2 :hover ul.sub {left:2px; top:35px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:auto; height:auto;}
.menu2 :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:auto;}
.menu2 :hover ul.sub li a {display:block; font-size:14px; height:20px; width:auto; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu2 :hover ul.sub li a.fly {background:#fff url(grafiken_navi/arrow.gif) 80px 7px no-repeat;}
.menu2 :hover ul.sub li a:hover {background:#4ab; color:#fff;}
.menu2 :hover ul.sub li a.fly:hover {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul li:hover > a.fly {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu2 :hover ul.sub_1950bisheute {left:2px; top:35px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:136px; height:auto;}
.menu2 :hover ul.sub_1950bisheute li {display:block; height:20px; position:relative; float:left; width:90px;}
.menu2 :hover ul.sub_1950bisheute li a {display:block; font-size:14px; height:20px; width:130px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu2 :hover ul.sub_1950bisheute li a.fly {background:#fff url(grafiken_navi/arrow.gif) 120px 7px no-repeat;}
.menu2 :hover ul.sub_1950bisheute li a:hover {background:#4ab; color:#fff;}
.menu2 :hover ul.sub_1950bisheute li a.fly:hover {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul li:hover > a.fly {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu2 :hover ul.sub_aktivitaeten {left:2px; top:35px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:167px; height:auto;}
.menu2 :hover ul.sub_aktivitaeten li {display:block; height:20px; position:relative; float:left; width:90px;}
.menu2 :hover ul.sub_aktivitaeten li a {display:block; font-size:14px; height:20px; width:161px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu2 :hover ul.sub_aktivitaeten li a.fly {background:#fff url(grafiken_navi/arrow.gif) 80px 7px no-repeat;}
.menu2 :hover ul.sub_aktivitaeten li a:hover {background:#4ab; color:#fff;}
.menu2 :hover ul.sub_aktivitaeten li a.fly:hover {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul li:hover > a.fly {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu2 :hover ul.sub_verein {left:2px; top:35px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:122px; height:auto;}
.menu2 :hover ul.sub_verein li {display:block; height:20px; position:relative; float:left; width:90px;}
.menu2 :hover ul.sub_verein li a {display:block; font-size:14px; height:20px; width:116px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu2 :hover ul.sub_verein li a.fly {background:#fff url(grafiken_navi/arrow.gif) 80px 7px no-repeat;}
.menu2 :hover ul.sub_verein li a:hover {background:#4ab; color:#fff;}
.menu2 :hover ul.sub_verein li a.fly:hover {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul li:hover > a.fly {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu2 :hover ul.sub_sonstiges {left:2px; top:35px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:95px; height:auto;}
.menu2 :hover ul.sub_sonstiges li {display:block; height:20px; position:relative; float:left; width:90px;}
.menu2 :hover ul.sub_sonstiges li a {display:block; font-size:14px; height:20px; width:89px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu2 :hover ul.sub_sonstiges li a.fly {background:#fff url(grafiken_navi/arrow.gif) 80px 7px no-repeat;}
.menu2 :hover ul.sub_sonstiges li a:hover {background:#4ab; color:#fff;}
.menu2 :hover ul.sub_sonstiges li a.fly:hover {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul li:hover > a.fly {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:93px; z-index:200; height:auto;}
 
Zuletzt bearbeitet von einem Moderator:
Moin,

in dieser Selektorgruppe ist für die Submenüs ab der dritten Menüebene u.a. ihre linke Startposition festgelegt, die du nun jeder einzelnen Submenübreite entsprechend anpassen müsstet:
CSS: 
.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:93px; z-index:200; height:auto;}

Kleiner Tipp am frühen Sonntagmorgen: Bevor die Umsetzung in eine Lebensaufgabe ausartet, und der CSS-Code sich mit jeder weiteren Submenüebene noch weiter aufbläht, würde ich der Einfachheit halber für alle Submenüs eine einheitliche Breite einrichten - so wie es im Original nunmal auch der Fall ist. Maßgeblich wäre dann die derzeit größte gewählte Breite für ul.sub_turniere.

Somit brauchst du im originalen Stylesheet lediglich die vom Autor festgelegten Maße zu ändern, und mußt nicht für jedes einzelne Submenü mit seinen folgenden Submenüebenen weitere individuelle CSS-Regeln aufstellen.

mfg Maik
 
von ner lebensaufgabe kannste laut sprechen, wenn ich aber feste maße eingebe, dann habe ich aber ziemlich viel platz bei manchen menüpunkten. und beim letzten hauptpunkt wird das unermenu dann über den rand gehen
 
tja ich glaube ich muß es doch zur lebensaufgabe machen
http://ttc-tobi.bplaced.net/neues_design_1/

leider klappt dass immer noch nicht so gut. die breiten der untermenüs hab ich jetzt alle so groß wie ich sie gerne hätte. aber der weiter verlauf passt dann nicht, bzw noch nicht. einzig bei 1950 bis heute ist das untermenu unter in memorium im richitgen abstand.
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:190px; top:-4px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:93px; z-index:200; height:auto;

bei jugend, und turniere habe ich immer noch meine probleme mit dem abstand, wie kann ich diesen definieren denn
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:190px; top:-4px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:93px; z-index:200; height:auto;

gilt ja für alle

außerdem zeigt mir der ie 6 unter sonstiges kein untermenu an, woran kann dass liegen?
 
Wenn der Selektor für alle Untermenüs gilt, muß dieser eben mittels eines ID- oder Klassenbezeichners spezifiziert werden.

mfg Maik
 
und wie mach ich dass dann?

im menu selbst mit: (ist bei Turniere) ?
<li class="mid"><a href="index.php" class="fly">Karlsbad Cup</a>

und im css?
wie muß ich dass den da machen?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück