[Del'ka]

Задача: сделать двухуровневое меню с полупрозрачными фонами.
В итоге: всё супер, но в IE6 не выделяются ссылки второго уровня меню, до тех пор пока они не опускаются ниже чем меню основное.


Сайт с примером: http://delka.za.kharkov.ua/2levelspng24menu.html

Для IE6 прописано такое правило:

#menu.main li a {position: relative}

и для первого, основного меню - действительно всё работает.
А вот со вторым - беда(

Код меню:
html

  <div id="menu" class="main">
    <ul>
      <li><a href="index.shtml">HOME</a></li>
      <li class="sel"><a href="#">GALLERY</a>
          <ul>
            <li><a href="#">Cities</a></li>
            <li><a href="#">Coastal</a></li>
            <li><a href="#">Country</a></li>
            <li><a href="#">Forests</a></li>
            <li><a href="#">Mountains</a></li>
            <li><a href="#">Outback</a></li>
            <li><a href="#">Rivers &amp; Lakes</a></li>
          </ul>
        </li>
        ... и так далее ...
    </ul>
    <div class="dftop"></div><div class="dfbottom"></div>
  </div>

css

#menu ul {list-style-type: none}
        #menu li {padding: 5px 0px 8px 0px; border-bottom: 1px #bfbfbf solid}
        #menu li a {margin: 0px 0px 0px 20px}

    #menu.main ul {border-top: 1px #bfbfbf solid}
        #menu.main li {border-top: 1px #bfbfbf solid; margin: -1px 0px 0px 0px}
            #menu.main li li {margin: -1px 10px 0px 10px}
        #menu.main li:hover {background: url("../img/bg_lightmenu.png")}
        #menu.main li a {color: #fff; display: block}
            #menu.main li:hover a, #menu.main li.jshover a {font-weight: bold; color: #000}
                #menu.main li:hover ul a, #menu.main li.jshover ul a {font-weight: normal}
                    #menu.main li:hover ul a:hover, #menu.main li.jshover ul a:hover {font-weight: bold}
                #menu.main ul ul a {margin: 0px}
            #menu.main li.sel:hover a, #menu.main li.sel.jshover a {background: url("../img/bull_href.png") no-repeat 190px 5px}

            #menu.main ul ul {position: absolute; display: none; left: 222px; top: 0px; width: 110px; height: auto; margin: 0px; padding: 0px; border-top: none; z-index: 10}

        #menu.main ul li:hover ul, #menu.main ul li.jshover ul {display: block}

и для IE6:

    #content.main {height: 350px}

        #menu.main div.dftop,#menu.main div.dfbottom {background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_darkmenu.png',sizingMethod='scale')}
            #menu.main ul li {float: left; width: 222px; background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_midgreymenu.png',sizingMethod='scale')}
              #menu.main li.jshover {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_lightmenu.png',sizingMethod='scale')}
                #menu.main ul li li {float: left; width: 90px; filter: none; margin: -1px 5px 0px 5px}
            #menu.main ul ul {background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_lightmenu.png',sizingMethod='scale')}

            #menu.main li a {position: relative}

подскажите, пожалуйста - как решить проблему.

Если я DXImageTransform.Microsoft.AlphaImageLoader уберу - всё очень даже замечательно работает.

Всё что я видел пока про активность ссылок на слое с фильтром, это то что им нужно выставлять позицирование чтоб они с общего уровня поднялись вверх. Ну так оно стоит. Я даже специально отдельную ссылку абсолютным позицированием с большим z-index ставил по центру выпадающего меню - толку - ноль.