[HTML/CSS] Rozwinaje menu w CSS / problem z tłem

[gorylek]

Witam,
tworzę małą witrynę i mam pewien problem. Napisałem menu rozwijane bez użycia JavaScript (100% CSS). Niestety o ile wszystkie normalne przeglądarki radzą sobie świetnie o tyle jak zwykle IE musi robić problemy :/ Problem na 100% występuje w IE 6, nie wiem jak nowsze wersje.

Oto 2 wersje tej samej witryny
Wersja pierwsza:
Submenu działa ale button po najechaniu myszą jest szary
HTML: http://www.poltorak-dariusz.yoyo.pl/bbo1/index.php
IE CSS: http://www.poltorak-dariusz.yoyo.pl/bbo1styl/iestyl.css

Wersja druga:
Submenu nie działa ale button po najechaniu myszą jest obrazkiem
HTML: http://www.poltorak-dariusz.yoyo.pl/bbo2/index.php
IE CSS: http://www.poltorak-dariusz.yoyo.pl/bbo2styl/iestyl.css

Menu działa prawidłowo gdy jako tło elementu jest ustawiony jakiś kolor. Chodzi tu tylko o główny link a nie submenu. Znowu gdy ustawie obrazek, menu przestaje działać.

Ta linijka odpowiada za wyświetlenie buttona po najechaniu myszą (styl dla IE)

Kod: Zaznacz cały

#menu ul li a:hover {color:#ffff00; background: #ccc;}

W tej postaci wszystko jest ok tylko że w miarę ładny obrazek jest zastąpiony szarym kwadratem.

Kiedy chcę dać obrazek zmieniając zaledwie background na:

Kod: Zaznacz cały

#menu ul li a:hover {color:#ffff00; background: url('button_on.jpg') no-repeat;}

Submenu nie chce się rozwinąć. Bladego pojęcia nie mam co jest nie tak.

Zamieszczam jeszcze wydzielony kod HTML z menu:

Kod: Zaznacz cały

<div id="menu">
     <ul>
          <li><a class="hide" href="index.html">Strona Główna</a>
          <!--[if lte IE 6]>
                  <a href="index.html">Strona Główna
                  <table><tr><td>
          <![endif]-->
	  <ul>
	      <li><a href="index.php">spies menu</a></li>
	      <li><a href="index.php">vertical menu</a></li>
	      <li><a href="index.php">enlarging list</a></li>
	      <li><a href="index.php">link images</a></li>
	      <li><a href="index.php">non-rectangular</a></li>
	      <li><a href="index.php">jigsaw links</a></li>
	      <li><a href="index.php">circular links</a></li>
	  </ul>
          <!--[if lte IE 6]>
               </td></tr></table>
               </a>
          <![endif]-->
          </li>
     </ul>
     </div>

Z góry dziękuje za pomoc.
Pozdrawiam
Gorylek

[MobyDick]

IE 6 nieprawidłowo reaguje na pseudoklase :hover zastosowaną w innych elementach niż odnośniki, do rozwiązania pewnymi sztuczkami niestety z zastosowaniem js

[gorylek]

MobyDick, sprawa już jest nieaktualna. Problem był z hasLayout dla IE (jeden z licznych bugów tej przeglądarki). Wystarczyło go wymusić poprzez zoom: 1;
Co do tego co mówisz to masz absolutną racje ale nie do końca.

IE można oszukać, zauważ jaki układ mam jako warunek. W wypadki IE 6 elementy z klasą hide są niewidoczne zaś pojawia się alternatywa która umieszcza menu wewnątrz elementu odnośnika.

IE nie zareaguje na div:hover { kod } ale zareaguje na a:hover div { kod}