nicht angemeldet
Hallo,
ich habe einige Probleme mit einem Hover Befehl bzw. mit meinem CSS. Ich möchte eine horizontale Navigation mit Dwop down Menü mittels CSS erstellen. Das Grundgerüst habe ich schon gebastelt, dank einiger Hilfe auch hier aus dem Forum.
Nun habe ich aber das Problem, wenn das drop down menü aufklappt, das ich einen ungewollten Rand bei hover in den menü einträgen erhalte. Wie kann ich dem kompletten Menü einen Rand von 1px geben, sowie zwischen den einzelnen Eintragen ebenfalls eine Linie als Trennung mit 1px. Wenn ich dem <li> den Wert border:1px solid black z. B. gebe, erhalten ich zwar einen Rahmen aber zwischen den Einträgen erscheint dieser doppelt, d. h. 2px stark.
Wer kann mir helfen?
Hier der Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynamisch Navigationsleisten einblenden</title>
<style type="text/css">
html,body {
width:100%;
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
body {
background-color:#666666;
}
#box {
width:760px;
height:100%;
background-color:#cccccc;
float:left;
border:1px solid black;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
font: 10px/20px "Lucida Grande", verdana, sans-serif;
}
ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin-left:0px;
padding: 0;
background-color:#1E517C;
text-align: center;
width:120px;
height:22px;
}
* html ul#Navigation li { /* Korrektur fuer den IE */
margin-bottom: 0px;
}
ul#Navigation ul li {
background-color:#800000;
width:121px;
}
ul#Navigation li ul {
margin: 0; padding: 0;
margin-left:0px;
position: absolute;
top: 23px; left: 0px;
display: none; /* Unternavigation ausblenden */
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation li ul li {
float: none;
display: block;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: 120px; /* Breite den in li enthaltenen Elementen zuweisen */
text-decoration: none; font-weight: normal;
color: #ffffff;
padding:0px;
}
ul#Navigation ul li a, ul#Navigation ul li span {
display: block;
width: 120px; /* Breite den in li enthaltenen Elementen zuweisen */
text-decoration: none; font-weight: normal;
background-image:none;
text-align: center;
color: #000000;
}
ul#Navigation ul li a:hover {
background-color:#ffffff;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 70px; /* Breite nach altem MS-Boxmodell für IE 5.x */
w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
color:#FFA525;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color: #ffffff;
}
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
border-color: none;
}
</style>
<!--[if IE]><script type="text/javascript">
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if(LI.firstChild) { // A (SPAN)
if(LI.firstChild.nextSibling) { // #text
if(LI.firstChild.nextSibling.nextSibling) { // UL ?
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
}
}
LI = LI.nextSibling;
}
while(LI);
}
function einblenden() {
this.firstChild.nextSibling.nextSibling.style.display = "block";
this.firstChild.nextSibling.nextSibling.style.backgroundColor = "none";
}
function ausblenden() {
this.firstChild.nextSibling.nextSibling.style.display = "none";
}
window.onload=hoverIE;
</script><![endif]-->
</head>
<body>
<div id="box">
<ul id="Navigation">
<li><a href="#Beispiel">Hauptnavigation</a>
<ul>
<li><a href="#Beispiel">Unternavigation 1</a></li>
<li><a href="#Beispiel">Unternavigation 2</a></li>
</ul>
</li>
<li><a href="#Beispiel">Hauptnavigation</a>
<ul>
<li><a href="#Beispiel">Unternavigation 1</a></li>
<li><a href="#Beispiel">Unternavigation 2</a></li>
</ul>
</li>
</ul>
<div>
</body>
</html>
Gruss und Danke
Thomas
MudGuard