Menu rozwijane w IE

[razorskate]

IE ma problem z obsługą pseudoklas, więc selektory potomka itp. są dla niego dość obce . Więc już chyba masz rozwiązanie ?

Jeśli chcesz zrobić menu rozwijalne, polecam takie:

Kod CSS:

Kod:

#drop_down_menus * {
    margin:0; padding:0; /* usunięcie marginesów */
    }
#drop_down_menus {
    behavior:url(../../lib/js_tools/csshover.htc);
    font-family:lucida, arial, sans-serif;
    border:1px solid #686;
    float:left;
    }
#drop_down_menus ul  {  
    /* border:2px solid red; */   /*  ramka kontenera */
    float:left; /* ul otacza li */
    }
#drop_down_menus li  {  
    /* border:2px solid blue; */  
    border-left:2px solid #ACA;
    list-style-type:none; /* usunięcie punktorów listy */
    float:left;
    position:relative;
    background-color:#DED;
    }
#drop_down_menus li:first-child  {
    border-left:none;
    }
#drop_down_menus a {
    display:block; /* odpowiada za poprawne wyświetlenie podmenu (element pod elementem) */
    padding:.3em 6px;
    color:#686;
    text-decoration:none;
    }
#drop_down_menus a:hover {
    color:#DED;
    background-color:#464;
    }
#drop_down_menus li ul {
    position:absolute;
    display:none;
    width:7em;
    left:-1px;
    }
#drop_down_menus li:hover ul {
    display:block; /* wyświetla podmenu po najechaniu myszką */
    }
#drop_down_menus li ul li {
    width:100%;  
    border-right:1px solid #686; /* obramowanie */
    border-bottom:1px solid #686;
    border-left:1px solid #686;
    }
#drop_down_menus li ul li:first-child {
    border-left:1px solid #686;
    border-top:1px solid #686;
    }
/* a hack for IE 6 - doesn't understand first-child \*/
* html #drop_down_menus li ul {
    border-top:1px solid #686; /* dodanie górnego obramowania w submenu w IE6 */
    }

Kod HTML:

Kod:

<div id="drop_down_menus">
  <ul>
    <li><a href="#">Item 1</a>
         <ul>
            <li><a href="#">Item 1a</a>    </li>
            <li><a href="#">Item 1b</a></li>
         </ul>
      </li>
    <li><a href="#">Item 2</a>
         <ul>
            <li><a href="#">Item 2a</a>    </li>
            <li><a href="#">Item 2b</a></li>
            <li><a href="#">Item 2c</a></li>
         </ul>
    </li>
    <li><a href="#">Item 3</a>
         <ul>
            <li><a href="#">Item 3a</a>    </li>
            <li><a href="#">Item 3b</a></li>
         </ul>
    </li>
  </ul>
</div>

Całą zabawa polega na odpowiednim zagnieżdżaniu list w html. To tyle jeśli chodzi o robienie rozwijanych menu w CSS . Dodaj do tego powyżej jakieś bajery graficzne i będzie w porządku. Jeśli przeanalizujesz budowę html tegoż menu, z łatwością poznasz zasadę jego działania