|
|||
Problem mit CSS Dropline menü
Hallo lieber CSS Experten,
ich möchte gerne ein Droplinemenü mit CSS realisieren. Leider versuche ich seit mehreren Tagen vergeblich das Problem zu lösen, aber ohne Erfolg. Mein Menü soll folgende Darstellung haben. Das obere Menü soll beim aktivierten Zustand eine andere Hintergrundfarbe haben (in der CSS => class="current"). Das klappt auch soweit. Nur das Submenu macht mir sehr viele Probleme. Da mein HTML eine verschachtelte Form hat, übernimmt das Submenu alle Formatierungen vom Hauptmenü. Ich hab den Verdacht, dass das Submenü vom Hauptmenü die Formatierungen vererbt. Ich kann es aber irgendwie nicht vermeiden, da ich den Fehler nicht finden kann. Bitte hilft mir, ich bin sehr am verzweifeln Hier ist mein HTML-Code HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Navigationsmenü mit zwei Ebenen</title> <link rel="stylesheet" href="top_navi.css" type="text/css" media="screen" /> </head> <body> <div id="naviWrapper"> <div id="Navigation"> <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">Menüpunkt_1</a></li> <li><a href="#">Menüpunkt_2</a> <!--Untermenü von Menüpunkt_2--> <ul class="sub_menu"> <li><a href="#">Menüpunkt_2.1</a></li> <li class="sub_current"><a href="#">Menüpunkt_2.2</a></li> <li><a href="#">Menüpunkt_2.3</a></li> <li><a href="#">Menüpunkt_2.4</a></li> </ul> <!--Ende Untermenü--> </li> <li><a href="#">Menüpunkt_3</a></li> <!--Untermenü von Menüpunkt_4--> <li><a href="#">Menüpunkt_4</a> <ul class="sub"> <li><a href="#">Menüpunkt_4.1</a></li> <li><a href="#">Menüpunkt_4.2</a></li> <li><a href="#">Menüpunkt_4.3</a></li> <li><a href="#">Menüpunkt_4.4</a></li> </ul> </li> <!--Ende Untermenü--> <li><a href="#">Menüpunkt_5</a></li> <li><a href="#">Menüpunkt_6</a></li> </ul> </div> </div> </body> </html> /*CSS*/ Code:
/*Navigation*/ body{ font-size:62.5%; } #naviWrapper { background-color:#fff1e6; border-left:1px solid #666666; /*äußere Rahmen für die Navigation*/ border-right:1px solid #666666; border-bottom:2px solid #9e131c; clear: left; margin:50px auto; /*nur hier, ansonsten 0*/ overflow:hidden; width:80%; height:4.8em; } #Navigation { background:#fff1e6 url(Navi.gif) repeat-x scroll 0 0; float:left; height:2.3em; width: 100%; position: relative; } #Navigation ul li { display: inline; float: left; margin: 0; width: auto; padding:0; height:auto; /*border: 1px dashed #FFFF00;*/ } #Navigation .menu, #Navigation .current { margin:0; padding:0; list-style:none; display:block; } #Navigation .menu a, #Navigation .current a { color:#EAEAEA; display: block; float:left; font-family: Arial; font-size: 1.2em; font-weight: bold; font: Arial, Helvetica, sans-serif; height: 100%; margin: 0 auto; position: relative; text-align: center; text-decoration: none; white-space: nowrap; padding: 3px 10px 10px 10px;/*richtet den oberen Menüzeile auf dem Hintergrundbild*/ } #Navigation .current a{ background-color: #fff1e6; border-top: 3px solid #9e131c; color: #000000; padding-top: 1px; } #Navigation .menu a:hover, #Navigation .menu li:hover a { background-position:0 -75px; cursor:pointer; background-color: #fff1e6; border-top: 3px solid #9e131c; color: #000000; padding-top: 1px; } /*----------------------------------------------------------------------------- Untermenü -------------------------------------------------------------------------------*/ #Navigation ul li ul li{ display: inline; float: left; margin: 0; width: ; padding:1px; height:auto; /*border: 1px dashed #00FF00;*/ } #Navigation .sub{ position:absolute; left:-1000px; top:-1000px; width:0; height:0; overflow:hidden; display:inline; /* display: none;*/ } #Navigation .sub_menu { list-style-image:none; list-style-position:outside; list-style-type:none; margin:0; padding:0; } #Navigation .sub_menu{ /*background:##fff1e6 none repeat scroll 0 0;*/ color:#000000; display:block; left:0; padding:0; position:absolute; top:25px; width: 100%; /*height:13px;*/ z-index:10; margin: 0; } #Navigation .sub_menu a { background:#fff1e6 url(http://www.stunicholls.com/menu/pro_dropline_4/diamond.gif) no-repeat scroll right 35%; border:0 none; color:#818080; display:block; float:left; font-size:1.1em; font-family:arial; /*height:23.5px;*/ line-height:20px; margin:0; padding:1px 10px 10px; text-decoration:none; white-space:nowrap; } #Navigation .sub_menu a:hover { color:#000000; text-decoration: underline; } #Navigation .sub_current a{ color:#000000; } |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Redesign für Steiner Cycling Team | pkipper | Site- und Layoutcheck | 11 | 09.02.2011 13:25 |
Einbindung von frei erhältlichen Scripten - CSS Problem | DonL | CSS | 1 | 22.01.2011 17:09 |
Problem mit CSS Menü | SMundt | CSS | 9 | 07.01.2009 20:12 |
Tab Menü Problem | BloodHunger | CSS | 6 | 22.12.2008 17:04 |
Menue Css Problem | AKraisser | CSS | 11 | 27.11.2008 17:40 |