Zur Navigation

menu via css oder ähnlichem erstellen

1 tobi

hallo zusammen,

ich versuche nun meine webseite ein wenig zu überarbeiten.

http://ttc-tobi.bplaced.net/neues_design.php
ein hoizontales menü ist eingebaut, nur stellt sich mir jetzt die frage wie ich untermenüs realisieren kann.

gibts es irgendwo vorlagen die man sich zu gemüte führen kann, oder hilfreiche informationen, die expliciet solche menus betreffen?

bzw ne kleien scriptvorlage

mfg tobsp

14.10.2009 16:27

4 tobi

ich danke für die links.

ich hab nun ein menu mal eingepflegt, das design passt zwar farblich noch nicht aber immerhin hab ich das menu reingeschafft

http://ttc-tobi.bplaced.net/neues_design/

16.10.2009 16:52

5 tobi

sorry für den doppelpost, wie oben schon geschrieben, habe ich ein menu gefunden und auch proboert einzubauen, leider komme ich im moment nicht weiter.
http://ttc-tobi.bplaced.net/neues_design_1/

- der ie 6 zeigt mir bei sonstiges kein untermenu an
- das untermenu von turnier ebereitet mir probleme, da tauchen die unterpunke hintereinander auf
- das untermenu von jugendn hat bei veranstaltungen oder mannschafen zum jeweilen weiteren untermenu einen zu weiten abstand.das gleiche problem hab ich auch bei 1950 bis heute

hier mal der css code und der menu code:


.preload2 {background: url(grafiken_navi/button4.gif);}
.menu2 {padding:0 0 0 4px; 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 9px; 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:190px; 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:184px; 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) 178px 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) 178px 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_jugend {left:2px; top:35px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:150px; height:auto;}
.menu2 :hover ul.sub_jugend li {display:block; height:20px; position:relative; float:left; width:90px;}
.menu2 :hover ul.sub_jugend li a {display:block; font-size:14px; height:20px; width:144px; 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_jugend li a.fly {background:#fff url(grafiken_navi/arrow.gif) 133px 7px no-repeat;}
.menu2 :hover ul.sub_jugend li a:hover {background:#4ab; color:#fff;}
.menu2 :hover ul.sub_jugend li a.fly:hover {background:#4ab url(grafiken_navi/arrow_over.gif) 133px 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) 120px 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:190px; top:-4px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:93px; z-index:200; height:auto;}



<span class="preload2"></span>

<ul class="menu2">

        <li class="top"><a href="index.php" id="mannschaften" class="top_link"><span class="down">MANNSCHAFTEN</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="sub_mannschaften">
                        <li><a href="damen1.php">Damen 1</a></li>
                        <li><a href="damen2.php">Damen 2</a></li>
                        <li><a href="herren1.php">Herren 1</a></li>
                        <li><a href="herren2.php">Herren 2</a></li>
                        <li><a href="herren3.php">Herren 3</a></li>
                        <li><a href="herren4.php">Herren 4</a></li>
                        <li><a href="herren5.php">Herren 5</a></li>
                        <li><a href="herren6.php">Herren 6</a></li>
                        <li><a href="jugend.php">Jugend</a></li>
                        <li><a href="schuelerA.php">Sch&uuml;ler A</a></li>
                </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>

        <li class="top"><a href="index.php" id="turniere" class="top_link"><span class="down">TURNIERE</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="sub_turniere">
                        <li><a href="index.php" class="fly">Ping-Pong-Caf&eacute;<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                                        <ul>
                                                <li><a href="ppc2009.php/">2009</a></li>
                                                <li><a href="index.php" class="fly">2010<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                                                        <ul>
                                                                <li><a href="ppc2010.php">2010</a></li>
                                                        </ul>
                                                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                                </li>
                                                <li><a href="ppcArchiv">Archiv</a></li>
                                        </ul>
                                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                        </li>
                        <li><a href="index.php" class="fly">Karlsbad Cup<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                                        <ul>
                                                <li><a href="karlsbadCup2009.php">2009</a></li>
                                                <li><a href="karlsbadCupArchiv.php">Archiv</a></li>
                                        </ul>
                                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                        </li>
                        <li><a href="index.php" class="fly">Vereinsmeisterschaften<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                                        <ul>
                                                <li><a href="vmErwachsene.php">Erwachsene</a></li>
                                                <li><a href="vmJugend.php">Jugend</a></li>
                                                <li><a rel="oeffneneuesfenster" href="dateien/archiv_sportliches/archiv_Vereinsmeisterschaften.pdf">Archiv</a></li>
                                        </ul>
                                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                        </li>
                        <li><a href="turniererfolge.php">Turniererfolge</a></li>
                        <li><a href="turniervorschau.php">Turniervorschau</a></li>
                </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>

        <li class="top"><a href="index.php" id="jugend" class="top_link"><span class="down">JUGEND</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="sub_jugend">
                        <li><a href="jugendAllgemein.php">Allgemein</a></li>
                        <li><a href="jugendAnsprechpartner.php">Ansprechpartner</a></li>
                        <li><a href="jugendTraining.php">Training</a></li>
                        <li><a href="index.php" class="fly">Mannschaften<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                                        <ul>
                                                 <li><a href="jugend.php">Jugend</a></li>
                                                 <li><a href="schuelerA.php">Sch&uuml;ler A</a></li>
                                        </ul>
                                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                        </li>
                        <li><a href="jugendAuswaertsfahrten.php">Ausw&auml;rtsfahrten</a></li>
                        <li><a href="index.php" class="fly">Veranstaltungen<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                                        <ul>
                                                 <li><a href="jugendFreizeit.php">Freizeit</a></li>
                                                 <li><a href="jugendAusflug.php">Ausflug</a></li>
                                                 <li><a href="jugendTrainingstag.php">Trainingstag</a></li>
                                        </ul>
                                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                        </li>
                </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>

        <li class="top"><a href="index.php" id="termine" class="top_link"><span class="down">TERMINE</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="sub_termine">
                         <li><a rel="oeffneneuesfenster" href="dateien/gesamtspielplan.pdf">Gesamtplan</a></li>
                         <li><a href="termine2009.php">Termine 2009</a></li>
                </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>

        <li class="top"><a href="index.php" id="presse" class="top_link"><span class="down">PRESSE</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="sub_presse">
                        <li><a href="presseAktuell.php">Aktuell</a></li>
                        <li><a href="presse2009.php">2009</a></li>
                        <li><a href="presseArchiv.php">Archiv</a></li>
                </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>

        <li class="top"><a href="index.php" id="bis_heute" class="top_link"><span class="down">1950 bis HEUTE</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="sub_1950bisheute">
                        <li><a href="chronik.php">50 Jahre SVL/TTC</a></li>
                        <li><a href="30jahreTTC.php">30 Jahre TTC</a></li>
                        <li><a href="trikots_ttc.php">Trikotarchiv</a></li>
                        <li><a href="index.php" class="fly">In Memorium<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                                        <ul>
                                        <li><a href="karlSpiegel.php">Karl Spiegel</a></li>
                                        <li><a href="bertholdBrecht.php">Berthold Brecht</a></li>
                                        <li><a href="dorisRied.php">Doris Ried</a></li>
                                        <li><a href="wernerKohlmueller.php">Werner Kohlm&uuml;ller</a></li>
                                        <li><a href="brunoRohrer.php">Bruno Rohrer</a></li>
                                        <li><a href="wolfgangRupp.php">Wolfgang Rupp</a></li>
                                        <li><a href="uteSchmidt.php">Ute Schmidt</a></li>
                                        </ul>
                                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                        </li>
                </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>

        <li class="top"><a href="index.php" id="aktivitaeten" class="top_link"><span class="down">AKTIVIT&Auml;TEN</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="sub_aktivitaeten">
                        <li><a href="jahresabschlussfeier.php">Jahresabschlussfeier</a></li>
                        <li><a href="maiAusflug.php">1. Mai</a></li>
                        <li><a href="jahresausflug.php">Jahresausflug</a></li>
                        <li><a href="dorffest.php">Dorffest</a></li>
                        <li><a href="jugendFreizeit.php">Freizeit</a></li>
                        <li><a href="damenfreizeit.php">Damenfreizeit</a></li>
                        <li><a href="jahresausklang.php">Jahresausklang</a></li>
                        <li><a href="hochzeiten.php">Hochzeiten</a></li>
                </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>

        <li class="top"><a href="index.php" id="verein" class="top_link"><span class="down">VEREIN</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="sub_verein">
                        <li><a href="news.php">News</a></li>
                        <li><a href="verwaltung.php">Verwaltung</a></li>
                        <li><a href="spiellokal.php">Spiellokal</a></li>
                        <li><a href="mitgliedschaft.php">Mitgliedschaft</a></li>
                        <li><a href="trainingszeiten.php">Trainingszeiten</a></li>
                </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>

        <li class="top"><a href="index.php" id="sonstiges" class="top_link"><span class="down">SONSTIGES</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="sub_sonstiges">
                        <li><a href="sponsoren.php">Sponsoren</a></li>
                        <li><a href="links.php">Links</a></li>
                        <li><a href="bildergalerie.php">Galerie</a></li>
                        <li><a href="gaestebuch.php">G&auml;stebuch</a></li>
                        <li><a href="tibo.php">Tibo</a></li>
                        <li><a href="bundesliga.php">Bundesliga</a></li>
                        <li><a href="regeln.php">TT-Regeln</a></li>
                </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>

</ul>

evtl könnt ihr mir ja bei der problemlösung helfen.

mfg tobi

19.10.2009 17:12

6 Jörg

- das untermenu von turnier ebereitet mir probleme, da tauchen die unterpunke hintereinander auf

Das liegt wohl daran, dass der 184px breite Link nicht in das 90px breite LIstenelement passt

.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:184px; line-height:20px;

- das untermenu von jugendn hat bei veranstaltungen oder mannschafen zum jeweilen weiteren untermenu einen zu weiten abstand.das gleiche problem hab ich auch bei 1950 bis heute

Den Abstand regelst du mit diesem left Wert:

.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;}

20.10.2009 00:27

7 tobi

hallo jörg,

danke für die ersten hilfreichen tipps.

problem 1 habe ich dann damit gelöst:

.menu2 :hover ul.sub_turniere li {display:block; height:20px; position:relative; float:left; width:184px;}
.menu2 :hover ul.sub_turniere li a {display:block; font-size:14px; height:20px; width:184px; line-height:20px;

problem 2 mit den untermenüs, bereitet aber immer noch probleme.
das hier gilt ja für alle untermenüs, wenn ich mich nciht irre.

.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;}

kann ich dass auch splitten?
denn bei turniere, jugend, 1950 bis heute sind die menues ja unterschiedlich breit. und die untermenüs würden ja bei
left:190px
immer erst bei 190 anfangen, auch wenn das erste menu beispielsweiße bei 10px aufhört.

mfg tobi

20.10.2009 17:12

8 Käptn Blaubär

Auf http://wonderwebware.com/css-menu/ ist das einfach zu bedienende Programm "CSS Menu Generator 4.0" erhältlich, das waagerechte und senkrechte Menüs mit bis zu 5 Ebenen erzeugt. Wenn die (beiliegende) htc-Datei eingebunden ist, funktionieren die Menüs auch mit IE5.5 und IE6.

21.10.2009 19:06

9 Jörg

Zitat von tobi
problem 2 mit den untermenüs, bereitet aber immer noch probleme.
das hier gilt ja für alle untermenüs, wenn ich mich nciht irre.

.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;}

kann ich dass auch splitten?
denn bei turniere, jugend, 1950 bis heute sind die menues ja unterschiedlich breit. und die untermenüs würden ja bei
left:190px
immer erst bei 190 anfangen, auch wenn das erste menu beispielsweiße bei 10px aufhört

Du kannst wie weiter oben auch, den Selektoren noch die betreffenden Klassen zuweisen:

 .menu2 :hover ul.sub_turniere /* und so weiter */

22.10.2009 11:30

10 tobi

Zitat von Jörg

Du kannst wie weiter oben auch, den Selektoren noch die betreffenden Klassen zuweisen:
 .menu2 :hover ul.sub_turniere /* und so weiter */
genau dass habe ich gesucht. die untermenus hab ich jetzt alle plaziert.


.menu2 :hover ul.sub_turniere :hover ul,
.menu2 :hover ul.sub_turniere :hover ul :hover ul,
.menu2 :hover ul.sub_turniere :hover ul :hover ul :hover ul,
.menu2 :hover ul.sub_turniere :hover ul :hover ul :hover ul :hover ul
{left:188px; top:-4px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:149px; z-index:200; height:auto;}

nun stellt sich mir die frage, wie bekomme ich das mit der größe der untermenüs hin? die sind jetzt alle relativ groß und ich weiß nicht wie ich diese kleiner machen kann.

http://ttc-tobi.bplaced.net/neues_design_1/

22.10.2009 17:40 | geändert: 22.10.2009 17:40