Navigations Problem

[Sprite]

Hallo liebe HTML.de- User.
Ich habe ein Problem in meiner Navigation.
Meine Navigation ist im Header eingebaut und
hat ein Untermenü.
Wen ich auf dieNavigation gehe um einen Untertitel
auszuweählen stört das Content und das Untermenü geht immer wieder hoch.
:-(:-(
Es währe nett wen ihr mir helfen könntet.

CSS Code:

#menubar, #menubar ul {    
padding: 0;    
margin: 0; 
list-style: none;
float: right;
}

#menubar a { 
padding: 5px 0 1px 0; 
display: block; 
text-decoration: none;    
font-size: 11px;    
font-weight: normal; 
text-align: center; 
color: #656565;
}

#menubar li {
float: left; 
width: 150px;
background: url(http://www.demo.doublekey.de/syn1/images/images_07.jpg) no-repeat;
}

#menubar li ul, #menubar ul li { 
width: 148px; 
background-image: none;
border-bottom: 1px solid #1b1b1b; 
}

#menubar ul li a  {    
color: #656565;
border-right: 0; 
padding: 5px 10px 5px 10px; 
text-align: left; 
width: 130px;    
}

#menubar li ul { 
background-image: none;
position: absolute; 
display: none;    
background-color: #171717;    
border-right: 1px solid #202020;    
border-left: 1px solid #202020;  
}

#menubar li:hover a, #menubar a:focus, #menubar a:active, #menubar li.hvr a { 
color: #c0c0c0;
}

#menubar li:hover ul, #menubar li.hvr ul { 
display: block;     
background-image: none; 
}

*+html #menubar li:hover ul { 
position: relative; 
}

* html #menubar li:hover ul { 
position: relative; 
}

#menubar li:hover ul a { 
color: #656565;
background-color: #171717;    
background-image: none;
}

#menubar ul a:hover { 
background-color: #aa4040 !important;
color: #ffffff !important;     
width: 128px; 
background-image: none;
}

Währe sehr net wen ihr euch Melden könntet.

MFG <Sprite>

P.S.: Meine Homepage: http://cstrikesource.com/ < Problem in Navigtion.

 

[Gilles]

Ich bin nicht soo der CSS Spezialist, aber müsste #menubar ul a:hover nicht -> #menubar li a:hover sein ?
Denn du hangelst dich ja im DOM runter. da ist dein ul namens menubar. Dann kommt da drunter das Listitem (li) und da drin steht ja der Link.

Desweiteren mal eine frage. Warum um alles in der Welt benutzt du Frames? Du hast nur eine Framesrc gesetzt. Schmeiss das alles raus und benutz nur die Seitem die du mit Source geladen hast.

Edit: Wobei. Bestimmt benutzt du das, damit die Seite nicht neu "lädt". Und was ist, wenn jemand den unterpunkt Clan ins Lesezeichen mit aufnehmen will? Geht nicht, da er sich ja imme rnoch auf der index.html befindet ^^
Desweiteren hast du eine 1 zeilige noframes Seite erstellt. Kein Ersatz wie ich finde ;)
Das heisst manche Menschen können deine Website garnicht sehen. Denke nicht dass du das willst :)

probier übrigens nochmal folgendes zu ergänzen

#menubar li {
  display: block;
}

Denn der Schliesst das ul ja schon anscheinend bevor der das li hovern kann.
teste es mal aus ;)

 

[Efchen]

Ich bin nicht soo der CSS Spezialist, aber müsste #menubar ul a:hover nicht -> #menubar li a:hover sein ?

Ohne nachzuschauen: Da li immer innerhalb von ul ist, und ein a niemals außerhalb eines li aber innerhalb eines ul sein kann, und li niemals ohne ul existiert, sollte beides den selben Effekt haben.
Du könntest dann auch #menubar ul li a:hover schreiben.
Oder #menubar > ul > li > a:hover, aber das kann der alte IE nicht.

 

[Sprite]

Gilles

danke Gilles aber es hat leider nicht geklappt. :(
Aber vil. sieht ja irgendeiner den Fehler :

#menubar, #menubar ul {    
padding: 0;    
margin: 0; 
list-style: none;
float: right;
}

#menubar a { 
padding: 5px 0 1px 0; 
display: block; 
text-decoration: none;    
font-size: 11px;    
font-weight: normal; 
text-align: center; 
color: #656565;
}

#menubar li {
float: left; 
width: 150px;
background: url(http://www.demo.doublekey.de/syn1/images/images_07.jpg) no-repeat;
}

#menubar li ul, #menubar ul li { 
width: 148px; 
background-image: none;
border-bottom: 1px solid #1b1b1b; 
}

#menubar ul li a  {    
color: #656565;
border-right: 0; 
padding: 5px 10px 5px 10px; 
text-align: left; 
width: 130px;    
}

#menubar li ul { 
background-image: none;
position: absolute; 
display: none;    
background-color: #171717;    
border-right: 1px solid #202020;    
border-left: 1px solid #202020;  
}

#menubar li:hover a, #menubar a:focus, #menubar a:active, #menubar li.hvr a { 
color: #c0c0c0;
}

#menubar li:hover ul, #menubar li.hvr ul { 
display: block;     
background-image: none; 
}

*+html #menubar li:hover ul { 
position: relative; 
}

* html #menubar li:hover ul { 
position: relative; 
}

#menubar li {
  display: block;
}

#menubar ul a:hover { 
background-color: #aa4040 !important;
color: #ffffff !important;     
width: 128px; 
background-image: none;
}

Nochmals Vielen Dank ^^

 

[Efchen]

Da liegt ein "<p>&nbsp;</p>" vor Deinem Untermenu, das da stört. Mit Firebug siehst Du das sehr schön.

Aber ich möchte Dir nahelegen, Deine Frames und Dein Tabellenlayout rauszuschmeißen. So kannst Du doch nicht vernünftig arbeiten. Der Code ist total unübersichtlich und aus Sicht von HTML gesehen ist er auch noch falsch. Und auch nicht barrierefrei.

Brauchst Du eigentlich die ganzen Scripts da drin? Das ist ja unglaublich, was sic da tummelt...JS abschalten und alles ist für die Katz.

Ich würde die Site komplett neu schreiben und dabei HTML richtig lernen und richtig anwenden.

 

[Gilles]

Da liegt ein "<p>&nbsp;</p>" vor Deinem Untermenu, das da stört. Mit Firebug siehst Du das sehr schön.

Aber ich möchte Dir nahelegen, Deine Frames und Dein Tabellenlayout rauszuschmeißen. So kannst Du doch nicht vernünftig arbeiten. Der Code ist total unübersichtlich und aus Sicht von HTML gesehen ist er auch noch falsch. Und auch nicht barrierefrei.

Brauchst Du eigentlich die ganzen Scripts da drin? Das ist ja unglaublich, was sic da tummelt...JS abschalten und alles ist für die Katz.

Ich würde die Site komplett neu schreiben und dabei HTML richtig lernen und richtig anwenden.

Kann das bestätigen.
Schmeiss die Frames raus. :)