✔ Level2 NavigationBar Formatierung

[Denniz]

Hallo,

ich habe mir eine horizontale navigationsleiste erstellt welche unter einigen Punkten sublinks enthält.
Die submenuleisten werden mir aber nicht unter dem entsprechenden Hauptmenupunkten angezeigt sondern daneben.
Welche Regel muß angewendet werden damit die submenuleisten beim hovern unter dem Hauptmenupunkt angezeigt werden und die sublinks horizontal voneinander dargestellt werden?

Hier ist der link zu der navi:-link-

Meine CSS:

* { 
   margin:0; 
   padding:0; 
}

body { 
   behavior:url("csshover.htc"); 
}

#navi a:link, #navi a:visited { 
   font-family:"Microsoft Sans Serif", Verdana, Helvetica, Arial, sans-serif; 
   font-size: 9px; 
   color:#000000; 
   text-decoration:none; 
   padding-left:12px; 
   letter-spacing:1px; 
}

#navi a:hover { 
   background:url(arrow.gif) no-repeat 0px 3px ; 
   font-family:"Microsoft Sans Serif", Verdana, Helvetica, Arial, sans-serif; 
   font-size: 9px; 
   color:#ff8507; 
   text-decoration:none; 
}

ul#navi { 
   margin:0 auto; 
   clear:both; 
   width:800px; 
   text-align:right; 
}

ul#navi  li { 
   display:inline; 
   margin: 0px 5px; 
}

ul#navi li a { 
   outline:none; 
}

ul#navi li a#active { 
   background:url(arrow.gif) no-repeat 0px 3px ; 
   font-family:"Microsoft Sans Serif", Verdana, Helvetica, Arial, sans-serif; 
   font-size: 9px; 
   color:#ff8507; 
   text-decoration:none; 
}

#navi li ul { 
   display: inline; 
   visibility: hidden; 
}

#navi li:hover ul { 
   visibility: visible; 
   z-index: 100; 
}

Ich habe in "#navi li ul" "display: inline;" angewendet, wenn ich block nehme klappt es leider auch nicht.

Beste Grüße

 

[Maik]

Hi,

orientiere dich mal an deinem letzten CSS-Menü aus dem Januar.

Da hast du mit der Hintergrundposition gearbeitet, um die Menüs untereinander anzuordnen, und so "ähnlich" wirst du es auch hier umsetzen müssen.

Die Links der ersten Menüebene bekommen eine fixe Breite und die Links der zweiten Menüebene werden dann dementsprechend von links absolut positioniert.

 

[Denniz]

Hi,

die Navi klappt jetzt im FF. Für den IE6 mußte ich die Regel anpassen.
Allerdings klappt es im IE7 nicht .Da liegt die submenuleiste genau über der Hauptleiste beim hovern.
So sieht es aus:-link-

Ich weiß du hast den IE7 nicht aber vielleicht hast du eine Idee woran es liegen könnte ?
Gibt es eventuell eine art star hack nur für den IE7 dann könnte ich noch eine zusätzliche Regel für den IE7 schreiben mit margin-top:10px;. Dann würd es nämlich richtig aussehen.

Folgende Regeln mußte ich anpassen:

/*klappt für den FF*/
ul#navisub1 { 
   display: block; 
   visibility: hidden; 
   position: absolute; 
   left: 740px; 
   width: 300px; 
   margin-top:0px; 
   line-height:17px; 
}
/*klappt für den IE6 aber nicht für IE7*/
*html  ul#navisub1 { 
   display: block; 
   visibility: hidden; 
   position: absolute; 
   left: 726px; 
   width: 300px; 
   margin-top:12px; 
   line-height:22px; 
}

Hier der link zu der page -link-

 

[Maik]

Dann nutze den "Conditional Comment" (<!--[if IE]> ... <![endif]-->), um den IE7 mit seinem individuellen Stylesheet zu bedienen:

<link href="style.css" rel="stylesheet" type="text/css">
<!--[if IE 7]>
<style type="text/css">
ul#navisub1 {
margin-top: 10px;
}
</style>
<![endif]-->

bzw.

<link href="style.css" rel="stylesheet" type="text/css">
<!--[if IE 7]>
<link href="style_ie7.css" rel="stylesheet" type="text/css">
<![endif]-->