Guten Tag,
ich habe ein vertikales Navigationsmenü mit aufklappbaren Untermenüs erstellt. Jetzt habe ich dieses per Browservorschau im IE 8 getestet und festgestellt, jeder einzelne Button wird mit einem blauen Rahmen dargestellt. So soll das aber nicht aussehen. In den Browsern Opera, Firefox und Crome erfolgt die Darstellung korrekt ohne Rahmen.
Ich kann mir nicht erklären, woran es liegt. Ist hier eine "Umgehungslösung" speziell für den IE erforderlich oder habe ich etwas falsch gemacht.
Den Code habe ich hier beigefügt.
Ich würde mich freuen, wenn mir jemand bei der Lösung meines Problems helfen könnte.
Danke schon mal und viele Grüße
Anna.
PS. Ich arbeite mit DW CS4.
<!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=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
#navigation ul li, #navigation ul li a {
display: inline-block; /* haslayout Schalter fuer IE6/7 */
}
#navigation ul li, #navigation ul li a {
display: block; /* haslayout reset */
}
#menu ul
#menu h2
#menu a
#menu a:hover
#menu li
#menu ul ul ul
div#menu ul ul ul
div#menu ul ul li:hover ul
div#menu ul ul li.hover ul ul
div#menu ul ul ul li:hover ul
#menu { width: 80px;}
#menu ul {list-style: none;}
#menu h2 { display: block; }
#menu a { text-decoration: none; display: block; }
#menu li { position: relative; }
#menu ul ul ul {position: relative;}
div#menu ul ul ul {display: none; }
div#menu ul ul li:hover ul ul { display: none; }
div#menu ul ul li:hover ul { display: block; }
div#menu ul ul ul li:hover ul {display: block; }
</style>
</head>
<body>
<div id="menu">
<li>
<h2> Inhalt </h2>
<ul>
<li>
<ul>
<li> <a href="#"><img src="bilder/button1.jpg" width="125" height="25" /></a> </li>
<li><a href="#nogo"><img src="bilder/button2.jpg" width="125" height="25" /></a>
<ul>
<li><a href="#nogo"><img src="bilder/button21.jpg" width="125" height="25" /></a></li>
<li><a href="#nogo"><img src="bilder/button22.jpg" width="125" height="25" /></a></li>
<li><a href="#nogo"><img src="bilder/button23.jpg" width="125" height="25" /></a></li>
</ul>
</li>
<li><a href="#nogo"><img src="bilder/button3.jpg" width="125" height="25" /></a>
<ul>
<li><a href="#nogo"><img src="bilder/button31.jpg" width="125" height="25" /></a></li>
<li><a href="#nogo"><img src="bilder/button32.jpg" width="125" height="25" /></a></li>
<li><a href="#nogo"></a></li>
</ul>
</li>
<li><a href="#nogo">Kapitel 3</a>
<ul>
<li><a href="#nogo">Lektion 3.1</a></li>
<li><a href="#nogo">Lektion 3.2</a></li>
<li><a href="#nogo">Lektion 3.3</a></li>
</ul>
</li>
<li><a href="#nogo">Kapitel 4</a>
<ul>
<li><a href="#nogo">Lektion 4.1</a></li>
<li><a href="#nogo">Lektion 4.2</a></li>
<li><a href="#nogo">Lektion 4.3</a></li>
</ul>
</li>
<li><a href="#nogo">Kapitel 5</a>
<ul>
<li><a href="#nogo">Lektion 5.1</a></li>
<li><a href="#nogo">Lektion 5.2</a></li>
<li><a href="#nogo">Lektion 5.3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
