Hover-Menü zu dominant.

[Pimbi]

Hallo ihr!

Eigentlich bin ich mit meinem Selbstgeschriebenen css ganz zufrieden. nur leider Hovert das Menü wirklich IMMER mit. D.h. wenn ich mit der Maus über den Bildschirm fahre, fährt immer das Menü, das auf dieser ebene steht auch aus. Das geht natürlich garnicht, zumal dadurch das Menü immer im Vordergrund ist und in der zweiten Spalte (die den Inhalt enthält) beispielsweise keinen Link anwählen kann.
Eigentlich möchte ich, dass es ja nur wirklich dann hovert, wenn ich mit der Maus genau über das Feld gehe.

Ich vermute stark, dass irgendwo ein "position" falsch gesetzt ist oder so... oder woran kann das liegen? (z-index habe ich nicht definiert)
(möchte ungern den code hier posten, der ist n bisschen was lang... wenns unumgänglich ist, mach ichs aber natürlich.)

Hilfe bitte
Danke

[ChrisB]

Hi,

(möchte ungern den code hier posten, der ist n bisschen was lang... wenns unumgänglich ist, mach ichs aber natürlich.)

Deshalb bevorzugen wir ein (auf's Wesentliche reduziertes, valides) Online-Beispiel.

MfG ChrisB

[Pimbi]

Hallo Chris,

danke, aber ich habe leider keine Homepage wo ich das hosten könnte, bzw soll das ganze auch nicht irgendwo im inet landen :/
die css datei ist folgende:

  
body{  
	height:100%;  
}  
	  
#menu {  
float: left;  
}  
	  
#menu ul {  
position: fixed;  
float: left;  
}  
  
#menu h3, #menu a, #menu h1{  
font-family: "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, Arial, Helvetica, sans-serif;  
}  
  
#menu h1 {  
text-align: left;  
border: 1px solid silver;  
background:url(h3_bg.gif);  
min-width: 50em;  
height:75px;  
 }  
  
#menu h3 {  
color: #333;  
background:  url(h3_bg.gif);  
font-size:80%;  
border-width: 1px;  
border-style: solid;  
border-color: #000000;  
width:140px;  
 position:relative;  
 display:block;  
}  
  
#menu a {  
width:140px;  
color: #000000;  
background: #d5e1ef;  
text-decoration: none;  
position:relative;  
display:block;  
}  
  
#menu a:hover, #menu h3:hover {  
color: #000000;  
background:  #e5f1f8;  
  
}  
  
#menu li {  
width:140px;  
position: relative;  
display:block;  
}  
  
#menu a.direkt:link {  
font-family: "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, Arial, Helvetica, sans-serif;  
display: block;  
border-width: 1px;  
border-style: solid;  
border-color: #000000;  
margin: 0;  
color: #333;  
background:  url(h3_bg.gif);  
font-size:100%;  
}  
  
#menu a.direkt:hover {  
color: #000000;  
background:  #e5f1f8;  
display: block;  
  
}  
  
#menu ul li{  
float:left; position:fixed;  
display: block;  
}  
  
#menu ul li ul li {  
position:relative;display:block;  
  
}  
  
#menu ul li ul li ul {  
display:none;  
}  
  
  
  
#menu ul li:hover ul{  
display: block;  
position:relative;  
  
}  
  
#menu ul li:hover ul li ul{  
display: none;  
}  
  
#menu ul li:hover ul:hover li:hover ul{  
display: block; left:141px;  
position:relative;  
  
}  
  
#menu ul li:hover ul:hover li:hover ul li ul{  
display: none;left: 142px;  
  
}  
  
#menu ul li:hover ul:hover li:hover ul:hover li:hover ul{  
display: block; left:142px;  
position: relative;  
  
} 

hilft das? :/

[suit]

hilft das? :/

Eine Kopiervorlage, wie sie dieser Kandidat liefert, wäre das Mindeste.

Nur das CSS hilft relativ wenig, wenn das dahinerliegende HTML fehlt.

[psy]

Schätze es liegt daran:

#menu h1 {  
  min-width: 50em;  
}

Das Logo zieht das Menu auseinander und da die Listeneinträge als Block dargestellt werden, sind sie ebenfalls so breit.
Lösung: Das Logo aus dem Menü-div entfernen. Alternativ den Listenelementen eine feste Breite zuschreiben.

psy