Hallo zusammen,
ich versuche mich jetzt schon seit Tagen daran, das Problem zu lösen, aber ich packs nicht. Ich habe mir eine Pull-Down Navigationsleiste mit CSS gebastelt. Unter dieser Leiste sollen dann die eigentlichen Seiteninhalte stehen. Sobald das Pulldown aber über ein Bild geht und ich mit der Maus daghin navigieren möchte, verschwindet das Pulldown.
Das Problem tritt aber nur im Internet Explorer auf. Im Mozilla Firefox klappt das ohne Probleme.
Könnt ihr mir bitte helfen?
Ich habe mal den Code etwas zusammengeschrumpft:
HTML Seite:
<!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>Some Title</title>
<link rel='stylesheet' type='text/css' href='styles2.css'>
</head>
<body>
<table style='background-image: url(Hintergrund2.jpg);' align='center' border='0' height='130' width='1000'><tr><td></td></tr></table>
<div id="Rahmen">
<ul id="Navigation">
<li><a href="#Beispiel">Aktuelles</a></li>
<li><a href="#Beispiel">Thema1</a>
<ul class="Untermenu1">
<li><a href="Urlaub.php?page=1">Thema 1.1</a></li>
<li><a href="Urlaub.php?page=2">Thema 1.2</a></li>
<li><a href="#Beispiel">Thema 1.3</a></li>
<li><a href="#Beispiel">Thema 1.4</a></li>
</ul>
</li>
<li><a href="#Beispiel">Thema2</a>
<ul>
<li><a href="#Beispiel">Thema 2.1</a></li>
<li><a href="#Beispiel">Thema 2.2</a></li>
<li><a href="#Beispiel">Thema 2.3</a></li>
</ul>
</li>
<li><a href="#Beispiel">Thema 3</a>
<ul>
<li><a href="#Beispiel">Thema 3.1</a></li>
<li><a href="#Beispiel">Thema 3.2</a></li>
</ul>
</li>
<li><a href="#Beispiel">Thema 4</a>
<ul class="Untermenu4">
<li><a href="#Beispiel">Thema 4.1</a></li>
<li><a href="#Beispiel">Thema 4.2</a></li>
</ul>
</li>
<li><a href="#Beispiel">Thema 5</a></li>
<li><a href="#Beispiel">Thema 6</a></li>
</ul>
<div id="inhalt"><img src="Hintergrund2.jpg" /></div></div>
</body>
</html>
Und das dazugehörige CSS:
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #FFFCC7;
}
div#Rahmen {
width: 1000px;
padding: 0.8em;
border: 0px solid black;
background-color: #FFFCC7;
margin-left: auto;
margin-right: auto;
}
* html div#Rahmen { /* Korrektur fuer IE 5.x */
width: 48.7em;
w\idth: 47.1em;
}
div#Rahmen div {
clear: left;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}
ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin: 0.1em; padding: 0;
}
* html ul#Navigation li { /* Korrektur fuer den IE 5 und 6 */
margin-bottom: -0.4em;
}
*:first-child+html ul#Navigation li { /* Korrektur fuer den IE 7 */
margin-bottom: -0.1em;
}
ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.9em; left: -0.1em;
display: none; /* Unternavigation ausblenden */
z-index: 10;
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
*:first-child+html ul#Navigation ul { /* Workaround fuer den IE 7 */
background-color:silver; padding-bottom:0.4em;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation li ul li a{
float: none;
display: block;
width: 100%;
margin: 0;
margin-top: 0.1em; margin-bottom: 0.0em;
}
ul#Navigation li ul li {
float: none;
display: block;
width: 100%;
margin: 0;
margin-top: 0em; margin-bottom: 0.1em;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: 6.4em; /* Breite den in li enthaltenen Elementen zuweisen */
font-family: "Trebuchet MS", "Century Gothic", Helvetica, Arial, sans-serif;
text-decoration: none; font-weight: bold;
padding: 0.23em 0.97em 0.17em 1.03em;
border: 1px solid #FFFCC7;
border-left-color: #FFFCC7; border-bottom-color: #220F72;
color: white; background-image: url(button2.jpg);
}
* html ul#Navigation a, * html ul#Navigation span {
width: 8.6em; /* Breite nach altem MS-Boxmodell fuer 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:hover {
padding: 0.17em 1.03em 0.23em 0.97em;
border-color: #200270;
border-left-color: #200270; border-top-color: #200270;
background-image: url(button2_hover.jpg);
background-color: #FFFCC7;
color: #200270;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-color: silver;
}
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
background-color: maroon;
}
ul.Untermenu1 {
display:block;
width: 300px;
}
ul.Untermenu4 {
display: block;
width: 170px;
}
Vielen Dank schonmal!!
Viele Grüße
Kirin