nicht angemeldet
Hallo,
ich habe folgendes Problem:
Ich will nach eric meyer (http://www.meyerweb.com/eric/css/edge/menus/demo.html) ein Pop Up Menü entwerfen, will es aber nicht untereinander, also mit <ul>, sondern nebeneinander machen. Nun habe ich schon das Problem gefixt, das der IE 5.5. und 6 mit den Styledefinitionen hat. Mein Problem ist nun nur, dass nun gar nichts mehr angezeigt wird bzw. nur wenig, jedenfalls in IE und Mozilla, Opera hingegen hat da kaum Probleme.
Nun frage ich mich weshalb beide Browser Probleme mit den Definitionen haben. Desweiteren soll direkt neben dem ersten Menüpunkt noch ein zweiter, der sich bei aktueller Lage, während des Hover-Effekts nach unten verschiebt und nicht an seiner Stelle bleibt, was vermutlich an dem "relative" liegt.
Weiß da jemand einen Rat, wie ich das hinbekommen kann, oder habe ich nur Müll geschrieben in meiner Styledefinition?
Die Datei zum angucken liegt hier: http://www.pps-cologne.de/laeuft.html
Hier mal der Quelltext
das CSS Stylesheet:
span.file a {
background: #FFFFCC;
border-bottom: none;
border-left: solid 2px #FFFFCC;
border-top: solid 2px #FFFFCC;
border-right: solid 2px #FFFFCC;
padding: 5px;
margin: 0px;
top: 0px;
left: 0px;
position: static;
}
span.file a:hover {
background-color: #EEE8AA;
border-bottom: none;
border-left: solid 2px #000000;
border-top: solid 2px #000000;
border-right: solid 2px #000000;
}
span.file a span {
display: none;
border-bottom: solid 2px #000000;
border-left: solid 2px #000000;
border-top: none;
border-right: solid 2px #000000;
width: 150px;
position: relative;
}
span.file a:hover span {
display: block;
}
span.file a span a{
display: none;
border: none;
padding: 3px;
width: 143px;
position: relative;
}
span.file a span a:hover{
background-color: Yellow;
border: none;
position: relative;
}
span.file a:hover span a {
display: block;
}
span.test a {
background: #FFFFCC;
border-bottom: none;
border-left: solid 2px #FFFFCC;
border-top: solid 2px #FFFFCC;
border-right: solid 2px #FFFFCC;
padding: 5px;
margin: 0px;
top: 0px;
left: 0px;
position: relative;
}
span.test a:hover {
background-color: #EEE8AA;
border-bottom: none;
border-left: solid 2px #000000;
border-top: solid 2px #000000;
border-right: solid 2px #000000;
}
span.test a span {
display: none;
border-bottom: solid 2px #000000;
border-left: solid 2px #000000;
border-top: none;
border-right: solid 2px #000000;
padding: 0px;
margin: 0px;
top: 0px;
left: 0px;
width: 150px;
position: relative;
}
span.test a:hover span {
display: block;
}
span.test a span a{
display: none;
border: none;
padding: 3px;
margin: 0px;
top: 0px;
left: 0px;
width: 143px;
position: relative;
}
span.test a span a:hover{
background-color: Yellow;
border: none;
position: relative;
}
span.test a:hover span a {
display: block;
}
Und hier die Html Datei:
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="testen.css" />
</head>
<body>
<span class="file">
<a href="#id">Hallo
<span><a href="#hier">vielleicht</a>
<a href="#test">oder doch?</a></span></a>
</span>
<span class="test">
<a href="#id">Tach
<span><a href="#hier">möglich</a>
<a href="#test">sollte doch?</a></span></a>
</span>
</body>
</html>