nicht angemeldet
Hallo,
habe ein kleines Problem mit meinem css Menü.
Ich habe ein Drop Down Menü nur mit css erstellt, leider macht er im Internet Explorer aber bei den Punkten die keine Unterpunkte haben trotzdem einen Rahmen. Im Firefox stellt er es korrekt da.
Nun der Quellcode:
index.html:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TobiasBauhaus.de</title>
<style type="text/css">
<!--
body {
background-color: #006699;
}
-->
</style>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/non_ie.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="css/ie.css" rel="stylesheet" type="text/css" />
<!-->
</head>
<body>
<div class="hr_line"></div>
<div class="vr_line"></div>
<div class="text_layer"><span class="text">iijghskahr<br />
lmjhflkjhjksd</span></div>
<div class="navi_layer">
<div id="menuebox">
<div id="menue">
<div class="aussen">
<span class="menutag">Home</span>
</div>
<div class="aussen">
<span class="menutag">Projekte</span>
<a class="innen-1" href="#">tobiasbauhaus.de</a>
<a class="innen" href="#">hochzeitstauben-austen.de</a>
</div>
<div class="aussen">
<span class="menutag">Fussball</span>
<a class="innen-1" href="#">D1</a>
<a class="innen" href="#">SV 26 Südkirchen</a>
<a class="innen" href="#">Schalke 04</a>
</div>
<div class="aussen">
<span class="menutag">Basketball</span>
<a class="innen-1" href="#">TV Werne 03</a>
<a class="innen" href="#">NBA</a>
</div>
<div class="aussen">
<span class="menutag">Bildergalerie</span>
<a class="innen-1" href="#">Griechenland</a>
<a class="innen" href="#">Türkei</a>
</div>
<div class="aussen">
<span class="menutag">Zeichnungen</span>
<a class="innen-1" href="#">Zeichnungen</a>
<a class="innen" href="#">Comics</a>
<a class="innen" href="#">Eigene Werke</a>
</div>
<div class="aussen">
<span class="menutag">Forum</span>
</div>
<div class="aussen">
<span class="menutag">Gästebuch</span>
</div>
</div><!-- menue -->
<!-- Der folgende Block bedient nur IEs!
Durch diese Redundanz vermeiden wir den Einsatz von Javascript. -->
<!--[if IE]>
<div class="stupidie">
<a class="auss" href="#"><span class="menutag">Home</span>
<table><tr><td>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Projekte</span>
<table><tr><td>
<a class="inn" href="#">tobiasbauhaus.de</a>
<a class="inn" href="#">hochzeitstauben-austen.de</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Fussball</span>
<table><tr><td>
<a class="inn" href="#">D1</a>
<a class="inn" href="#">SV 26 Südkirchen</a>
<a class="inn" href="#">Schalke 04</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Basketball</span>
<table><tr><td>
<a class="inn" href="#">TV Werne 03</a>
<a class="inn" href="#">NBA</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Bildergalerie</span>
<table><tr><td>
<a class="inn" href="#">Griechenland</a>
<a class="inn" href="#">Türkei</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Zeichnungen</span>
<table><tr><td>
<a class="inn" href="#">Zeichnungen</a>
<a class="inn" href="#">Comics</a>
<a class="inn" href="#">Eigene Werke</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Forum</span>
<table><tr><td>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Gästebuch</span>
<table><tr><td>
</td></tr></table>
</a>
</div><!-- stupidie -->
<![endif]-->
</div>
<!-- menuebox -->
</div>
</body>
</html>
ie.css:
/*
Menue-styles fuer IEs
Am besten per Conditional Comment einbinden.
Fuer IE5.5 und 5.0 muessen nur geringfuegige kosmetische
Anpassungen vorgenommen werden (siehe Kommentare).
*/
#menue {
display:none;
}
.stupidie {
display: block;
position: absolute;
top: 5px;
left: 0;
z-index: 200;
}
a.auss {
float: left;
width: 170px;
height: 16px;
overflow: hidden;
display: block;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
font-size:12px;
text-decoration: none;
background-color: #e3fbd2;
color: #000;
margin-top:10px;
}
a:hover.auss {
background-color: #e3fbd2;
color: #000;
overflow:visible;
}
a:hover.auss table {
display: block;
height:-2px;
background-color: #006699;
color: #fff;
border:solid 1px #fff;
border-collapse:collapse;
width:170px;
}
a.inn {
display: block;
width: 158px;
height:auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;;
font-weight: normal;
text-align: center;
text-decoration: none;
background-color:#006699;
color: #fff;
padding-bottom:4px;
padding-top:4px;
}
a:visited.inn {
background-color: #006699;
color:#fff;
}
a:hover.inn {
position: relative;
background-color: #006699;
color: #fff;
}
span.menutag {
display: block;
cursor: default;
}
non_ie.css:
/*
Menue-styles fuer non-IEs
Achtung:
Fuer non-IEs gilt das Stylesheet 'dropdown.css'!
Fuer IE gilt das Stylesheet 'fix-ie.css' (per CC)!
*/
#menuebox {
position: relative;
height: 30px;
top: 5px;
left: 0;
z-index: 200;
}
.stupidie {
display: none;
}
#menue {
position:absolute;
}
#menue .aussen {
float: left;
display: block;
overflow: hidden;
width: 170px;
height: 16px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size:12px;
text-align: center;
color: #000;
background-color:#E3FBD2;
margin-top:10px;
}
#menue .aussen:hover {
height: auto;
width:168px;
background-color: #e3fbd2;
border: 1px solid #ffffff;
color: #a10000;
}
a.innen-1 {
}
a.innen,
a.innen-1 {
display: block;
width: 170px;
height:auto;
text-decoration: none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size:11px;
background-color: #006699;
color: #fff;
padding-top:4px;
padding-bottom:4px;
}
a:visited.innen,
a:visited.innen-1 {
background-color: #006699;
color:#fff;
}
a:hover.innen,
a:hover.innen-1 {
background-color: #006699;
color: #fff;
}
span.menutag {
display: block;
cursor: default;
}
Vielleicht findet ja einer den Fehler.
Schon mal danke im voraus!