Hallo und guten Morgen zusammen!
Ich habe für eine Website ein Menu gebastelt, welches die Hauptmenupunkte in einer Liste enthält, welche jedoch, wegen einer besonderen Schriftart, durch eine Grafik ersetzt werden.
Die Untermenupunkte befinden sich in untergeordneten Listen, werden nur durch das CSS gestaltet und "fliegen" beim überhovern der Überpunkte nach rechts heraus.
Dies alles funktioniert wunderbar; nur nicht im IE7. Dort verschwindet das jeweilige Untermenu, wenn man mit der Maus nicht schnell genug unterwegs ist.
Zwar habe ich nun bereits an mehreren Stellen gelesen, dass genau dieser Bug existiert, komme jedoch absolut nicht dahinter, wieso es sich bei mir so verhält.
Wenn sich jemand die Site online anschauen mag, teile ich den Link dort hin gerne mit. Aber vielleicht reichen ja auch die folgenden Auszüge zur Fehlerfindung aus.
Ganz vielen Dank und schöne Grüße, Mark
Auszug aus dem HTML:
HTML-Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Meine Seite</title>
<link href="new.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]><style type="text/css">
#navigation a {cursor: hand;}
*html #navigation a:hover { text-indent: 0;}
*html #navigation ul ul li {
margin-top: -1px;
}
</style><![endif]-->
<!--[if lte IE 6]>
<style type="text/css">
body {behavior: url(sidepages/csshover.htc);}
</style>
<noscript>
<style type="text/css">
#navigation ul ul {margin: 0px;}
</style>
</noscript>
<![endif]-->
<script type="text/javascript" src="sidepages/jquery-1.2.6.min.js"></script>
...
</head>
<div id="navigation">
<ul>
<li id="warum"><a href="fueruns.html">WARUM WIR?<b></b></a></li>
<li id="wohlfuehl"><a href="wohlfuehl.html">WOHLFÜLATMOSPHÄRE<b></b></a></li>
<li id="team"><a href="team.html">TEAM<b></b></a>
<ul>
<li class="first"><a href="doktor1.html">Dr. Eins</a></li>
<li><a href="doktor2.html">Dr. Zwei</a></li>
<li><a href="doktor3.html">Dr. Drei</a></li>
<li><a href="doktor4.html">Dr. Vier</a></li>
<li><a href="mitarbeiter1.html">Mitarbeiter Eins</a></li>
<li><a href="mitarbeiter2.html">Mitarbeiter Zwei</a></li>
<li><a href="mitarbeiter3.html">Mitarbeiter Drei</a></li>
<li><a href="mitarbeiter4.html">Mitarbeiter Vier</a></li>
<li><a href="mitarbeiter5.html">Mitarbeiter Fünf</a></li>
<li><a href="mitarbeiter6.html">Mitarbeiter Sechs</a></li>
<li><a href="mitarbeiter 7.html">Mitarbeiter Sieben</a></li>
<li><a href="mitarbeiter8.html">Mitarbeiter Acht</a></li>
</ul>
</li>
<li id="praxis"><a href="praxis.html">PRAXIS<b></b></a>
<ul>
<li class="first"><a href="kontakt.html">Kontakt</a></li>
<li><a href="anfahrt.html">Anfahrt</a></li>
<li><a href="ueberuns.html">Über uns</a></li>
<li><a href="zeiten.html">Öffnungszeiten</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</li>
<li id="leistung"><a href="leistung.html">LEISTUNGSSPEKTRUM<b></b></a>
<ul>
<li class="first"><a href="technik.html">Neueste Technik</a></li>
<li><a href="implantologie.html">Implantologie</a></li>
<li><a href="funktionell.html">Funktionelle Behandlung</a></li>
<li><a href="aesthetik.html">Ästhetische Behandlung</a></li>
<li><a href="kinder.html">Kinderzahnbehandlung</a></li>
<li><a href="falten.html">Faltenbehandlung</a></li>
<li><a href="reinigung.html">Professionelle Zahnreinigung</a></li>
<li><a href="kiefer.html">Kieferorthopädie</a></li>
<li><a href="medizin.html">Ganzheitliche Zahnmedizin</a></li>
<li><a href="kopfschmerz.html">Craniomandibuläre Dysfunktion</a></li>
</ul>
</li>
<li id="service"><a href="service.html">SERVICE<b></b></a>
<ul>
<li class="first"><a href="praxisservice.html">Praxisservice</a></li>
<li><a href="news.html">News</a></li>
</ul>
</li>
</ul>
</div>
Das entsprechende CSS:
Code:
#menu{
float:left;
margin-left: 20px;
background-color: #fff;
}
#logo ul li {
list-style:none;
line-height: 0.1em;
font-size: 0.1em;
}
#logo a {
height:150px;
width: 250px;
background: #fff url(images/logo.png) no-repeat;
display: block;
outline: none;
}
#logo a span {
display: none;
}
#navigation ul {
liststyle: none;
width: 250px;
height: 144px;
float: left;
}
#navigation li {
list-style: none;
width: 250px;
height: 24px;
}
#navigation a {
display: block;
height: 100%;
position: relative;
text-decoration: none;
overflow: hidden;
}
#navigation a b {
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url(images/navigation.png) no-repeat;
}
#navigation #warum b {
background-position: 0px -0px;
}
#navigation #wohlfuehl b {
background-position: 0px -24px;
}
#navigation #team b {
background-position: 0px -48px;
}
#navigation #praxis b {
background-position: 0px -72px;
}
#navigation #leistung b {
background-position: 0px -96px;
}
#navigation #service b {
background-position: 0px -120px;
}
#navigation li#warum:hover a b {
background-position: 0px -144px;
}
#navigation li#wohlfuehl:hover a b {
background-position: 0px -168px;
}
#navigation li#team:hover a b {
background-position: 0px -192px;
}
#navigation li#praxis:hover a b {
background-position: 0px -216px;
}
#navigation li#leistung:hover a b {
background-position: 0px -240px;
}
#navigation li#service:hover a b {
background-position: 0px -264px;
}
/* fuer den IE6 */
#navigation li#warum a:hover b {
background-position: 0px -144px;
}
#navigation li#wohlfuehl a:hover b {
background-position: 0px -168px;
}
#navigation li#team a:hover b {
background-position: 0px -192px;
}
#navigation li#praxis a:hover b {
background-position: 0px -216px;
}
#navigation li#leistung a:hover b {
background-position: 0px -240px;
}
#navigation li#service a:hover b {
background-position: 0px -264px;
}
#navigation ul ul {
position: absolute;
left: -99999px;
}
#navigation ul li:hover {
position:relative;
}
#navigation ul li:hover ul{
z-index:12;
left: 250px;
top: -1px;
}
#navigation li:hover li a {
background-color: #fff;
}
#navigation li li a:hover {
background-color: #f0f0f0;
}
#navigation ul ul li a {
display: block;
height: auto;
width: 250px;
padding: 5px 0 5px 0;
text-decoration:none;
color: #000;
outline: none;
}
#navigation ul ul li{
text-align: center;
font-size: 0.9em;
border-left: 1px solid #c8c8c8;
border-right: 1px solid #c8c8c8;
border-bottom: 1px solid #c8c8c8;
}
#navigation ul ul li.first{
border-top: 1px solid #c8c8c8;
margin-top: 0px;
}