Drop Down Menu verschwindet wieder
Tributer
- css
Hallo zusammen,
ich habe auf dieser Seitehttp://tributer.spacequadrat.de/ ein Drop-Down Menu erstellt. (Bzw. es versucht)
Allerdings verschwindet es wieder wenn man den Button verlässt.
Die Codes dafür sehen so aus.
HTML:
<ul id="menu" >
<li><a href="">Home</a>
<div><a href="">News</a>
<a href="">Weiteres</a></div>
</li>
CSS:
ul#menu {
width: 800px;
height: 40px;
margin: Auto;
padding: 0px;
Background-color: #033649;
}
ul#menu li {
width: 198px;
height: 28px;
float: left;
list-style: none;
border: 1px solid black;
display: Block;
text-align: center;
padding-top: 0px;
}
ul#menu li>div {
display:none
}
ul#menu li:hover div {
display: block;
}
ul#menu li:hover {
width: 198px;
height: 28px;
float: left;
list-style: none;
border: 1px solid black;
display: Block;
text-align: center;
padding-top: 0px;
background-color: #666666;
}
ul#menu a {
color: #FFFFFF;
text-decoration: none;
font-size: 20px;
width: 198px;
height: 32px;
background-image: url(but.jpg);
display:block;
padding-top: 8px;
}
ul#menu a:hover {
color:#3F0;
}
Leider komme ich nicht auf meinen Fehler.
Hat vielleicht wer eine Lösung?
Mfg Tributer
Hi,
ich habe auf dieser Seitehttp://tributer.spacequadrat.de/ ein Drop-Down Menu erstellt. (Bzw. es versucht)
Warum mit einem DIV für die Untermenüpunkte?
Zeichne auch diese als Liste aus.
Allerdings verschwindet es wieder wenn man den Button verlässt.
Natürlich, weil man ja auch das LI wieder verlässt.
ul#menu li {
height: 28px;
Schliesslich ist es nur 28px hoch,
ul#menu a {
height: 32px;
display:block;
und damit ragt der Link unten aus ihm hinaus; wenn man also mit dem Mauszeiger über den unteren Teil des Links geht, hat man damit das LI wieder verlassen.
MfG ChrisB
Ok hab das mal als Liste gemacht.
Allerdings bekomme ich das jetzt nicht sauber untereinander.
CSS:~~~css ul#menu {
width: 800px;
height: 40px;
margin: Auto;
padding: 0px;
Background-color: #033649;
}
ul#menu li {
width: 198px;
height: 28px;
float: left;
list-style: none;
border: 1px solid black;
display: Block;
text-align: center;
padding-top: 0px;
}
ul#menu li>ul {
display:block;
}
ul#menu li:hover ul {
display: block;
}
ul#menu ul {
position: relative;
margin: auto;
list-style: none;
}
ul#menu li:hover {
width: 198px;
height: 28px;
float: left;
list-style: none;
border: 1px solid black;
display: Block;
text-align: center;
padding-top: 0px;
background-color: #666666;
}
ul#menu a {
color: #FFFFFF;
text-decoration: none;
font-size: 20px;
width: 198px;
height: 32px;
background-image: url(but.jpg);
display:block;
padding-top: 8px;
}
ul#menu a:hover {
color:#3F0;
}
~~~html
<ul id="menu" >
<li><a href="">Home</a>
<ul><li><a href="">News</a></li>
<li><a href="">Weiteres</a></li>
</ul>
</li>
<li><a href="">About</a>
<ul><li><a href="">News</a></li>
<li><a href="">Weiteres</a></li>
</ul>
Vielen Dank schon mal für die Hilfe
ul#menu li {
width: 198px;
height: 28px;
float: left;
list-style: none;
border: 1px solid black;
display: Block;
text-align: center;
padding-top: 0px;
}ul#menu li>ul {
display:block;
}
Die innere Liste musst du absolut positionieren.
Denn du willst ja nicht, dass bei der Anzeige sich der Inhalt verschiebt.
mfg Beat
Was muss ich denn genau dafür ändern?
habe jetzt.
~~~css
ul#menu li {
width: 198px;
height: 28px;
float: left;
list-style: none;
border: 1px solid black;
display: Block;
text-align: center;
padding-top: 0px;
}
ul#menu li>ul {
display:none;
position:absolute;
}
ul#menu li:hover ul {
display: block;
}
ul#menu ul {
position: relative;
margin: auto;
list-style: none;
}
~~~html
<ul id="menu" >
<li><a href="">Home</a>
<ul class="drop"><li><a href="">News</a></li>
<li><a href="">Weiteres</a></li>
</ul>
Ohne per class .drop den Float zu clearen sind sie nebeneinander. Jedoch auch noch verschoben.
Mit der Aufhebung des Floats siehts aus wie vorher..
Ich glaub ich versteh dich nicht richtig.
Die Aktuelle variante ist auch wieder hochgeladen.
Mfg Michael
Grade nochmal ein bisschen rumprobiert aber wird nicht besser.
Ich würds gerne verstehen.
Aber den Float aufheben muss ich doch.
Grade nochmal ein bisschen rumprobiert aber wird nicht besser.
Ich würds gerne verstehen.
Aber den Float aufheben muss ich doch.
Absolut positionieren:
Absolut positioniert wird ein Alement relativ zu einem parent, der nicht static positioniert ist.
Wenn du die ul mit position:absolute versiehst, musst du dem parent li ein position:relative verleihen.
Ausrichten kannst du mit top left bottum oder right.
Verstehen heisst lesen, nämlich die Dokumentation.
mfg Beat
Hi,
Grade nochmal ein bisschen rumprobiert aber wird nicht besser.
Ich würds gerne verstehen.
http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern
MfG ChrisB
Grade nochmal ein bisschen rumprobiert aber wird nicht besser.
Das zählt wohl zu den Dingen die man beim Arzt nicht hören will :)
SCNR
Grade nochmal ein bisschen rumprobiert aber wird nicht besser.
Das zählt wohl zu den Dingen die man beim Arzt nicht hören will :)
Navigationen sind Krankenkassetauglich? Das erklärt alles!
mfg Beat