Ich habe ein Ausklappmenü.
Funtioniert in allen Broswern.
Jedoch möchte Ich Hintergrundgrafiken definieren
und der IE macht sobald diese drin sind Probleme.
Könnte mir eventuell jemand einen Tipp geben?
Dank im voraus!
Der Code:
Code
<!--[if lte IE 6]>
<style type="text/css">
table {border-collapse:collapse; border:0; margin:0; padding:0;}
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
.menu ul li a:hover {color:#000; background:#888888; }
.menu ul li a:hover ul {display:block; position:absolute; top:0; left:111px; width:111px;}
.menu ul li a:hover ul li a.sub {background:#FF9501; color:#000;}
.menu ul li a:hover ul li a {display:block; background:#d7d7d7; color:#000000; width:110px; }
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#888888; color:#000; }
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:111px; top:0; color:#000;}
.menu ul li a:hover ul li a:hover ul li a {display:block; width:150px; background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;}
</style><![endif]-->
<style type="text/css">
.menu {font-family: arial, sans-serif; width:112px; height:110px; position:relative; margin:0; font-size:11px; margin-top:30px;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000000; width:110px; height:20px; text-align:center; border:1px solid #6D6D6D; border-width:1px 1px 1px 1px; background:#d7d7d7; line-height:19px; font-size:11px; }
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}
.menu ul li:hover a {color:#000; background:#888888; }
.menu ul li:hover ul {display:block; position:absolute; top:0; left:111px; width:111px;}
.menu ul li:hover ul li a.hide {background:#FF9501; color:#000;}
.menu ul li:hover ul li:hover a.hide {width:110px;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#d7d7d7; color:#000000; width:110px; }
.menu ul li:hover ul li a:hover {background:#888888; color:#000; }
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:151px; top:0; color:#000;}
.menu ul li:hover ul li:hover ul li a {display:block; width:150px; background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}
}
</style>Code
<div class="menu">
<ul>
[*][url='#']Link[/url]
[*][url='#']Link[/url]
<!--[if lte IE 6]>
<a href="#">Link
<table><tr><td>
<![endif]-->
<ul>
[*][url='#']Link II[/url]
[/list]
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
[/list]
</div>
Was zwar eine Unterlassungssünde war aber trotzdem im IE6 nichts brachte, nachdem ich das ausgebügelt hatte. Statt der Kommentierung habe ich jetzt den *html Hack benutzt. Jetzt klappte es im IE6/IE7,FF2.0 und Opera. IE5 und 5.5 habe ich nicht auf dem Rechner und müsste ich erst nachinstallieren. Außerdem bin ich überzeugt, das sich der CSS-Bereich noch optimieren lässt. Da habe ich mich aber nun nicht versucht.
