BiancaSoCh
Grünschnabel
Hallo zusammen,
ich möchte eine Selectbox / ein DropDown mit Bildern füllen.
Normalerweise ist dies ja nicht so ohne Weiteres möglich, darum habe ich versucht, die Funktionalität nachzubauen mit einer unordered list (ul). Den li's habe ich dann die Bilder zugewiesen, die ich anzeigen möchte.
Das verrückte ich jetzt, dass der Code in IE7 und FF etc funktioniert. Leider muss es jedoch auch im IE6 laufen und dieser sträubt sich bisher noch.
Hier mal der Code, den ich bisher zusammengestellt habe:
Der IE6 klappt nun das "Menü" nicht aus; scheinbar hat er Probleme mit der :hover Angabe. Kennt jemand dieses Problem und kann ggf. weiterhelfen? Gerne auch mit einem ganz neuen Ansatz!
Lieben Dank im Voraus für jegliche Hilfe!
Bianca
ich möchte eine Selectbox / ein DropDown mit Bildern füllen.
Normalerweise ist dies ja nicht so ohne Weiteres möglich, darum habe ich versucht, die Funktionalität nachzubauen mit einer unordered list (ul). Den li's habe ich dann die Bilder zugewiesen, die ich anzeigen möchte.
Das verrückte ich jetzt, dass der Code in IE7 und FF etc funktioniert. Leider muss es jedoch auch im IE6 laufen und dieser sträubt sich bisher noch.
Hier mal der Code, den ich bisher zusammengestellt habe:
Code:
<!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>
<title></title>
<style type="text/css">
body { font: normal 11px/13px Verdana; }
img { border: none; height: 23px; float: right; padding-right: 5px; clear:right; }
#menu ul.select { width: 200px; vertical-align: middle; border: solid 1px #CCC; list-style-type: none; }
#menu ul li.item { display: none; border-top: dotted 1px #CDCDCD; padding: 1px 0; }
#menu ul li.item:hover { display: block; }
#menu ul li.item a { display: block; width: 200px; height: 23px; background: #ECECEC; }
#menu ul li.top { background: transparent url(DropArrow.gif) no-repeat right; width: 195px; line-height: 18px; padding-left: 5px; }
#menu ul:hover .item { display: block; }
</style>
</head>
<body>
<div id="menu">
<ul class="select">
<li class="top"> - select from list - </li>
<li class="item"><a href="#"><img src="bild1.jpg" alt="" /></a></li>
<li class="item"><a href="#"><img src="bild2.jpg" alt="" /></a></li>
<li class="item"><a href="#"><img src="bild3.jpg" alt="" /></a></li>
</ul>
</div>
</body>
</html>Der IE6 klappt nun das "Menü" nicht aus; scheinbar hat er Probleme mit der :hover Angabe. Kennt jemand dieses Problem und kann ggf. weiterhelfen? Gerne auch mit einem ganz neuen Ansatz!
Lieben Dank im Voraus für jegliche Hilfe!
Bianca
