Почему это выпадающее меню не работает?

Question

Я скачал шаблон Обновить от Styleshout.com , так как он мне действительно нравится. Но, к сожалению, в нем не было выпадающего меню, только обычное меню.

Итак, я попытался интегрировать выпадающее меню , которое я нашел хороший учебник для .

Это почти работает - почти. Вот результат: шаблон на моем веб-пространстве .

Меню открыты - но не в том месте. Зачем? Что не так с моей реализацией? Все 3 раскрывающихся списка открываются под первым элементом.

Я надеюсь, что вы можете мне помочь. Заранее спасибо!

PS: вот код:

####################
####### HTML #######
####################
<ul id="nav">
    <li><a href="index.html">Nav #1</a>
        <ul>
            <li><a href="#">Nav #1.1</a></li>
            <li><a href="#">Nav #1.2</a></li>
        </ul>
    </li>
    <li><a href="index.html">Nav #2</a>
        <ul>
            <li><a href="#">Nav #2.1</a></li>
            <li><a href="#">Nav #2.2</a></li>
        </ul>
    </li>
    <li><a href="index.html">Nav #3</a>
        <ul>
            <li><a href="#">Nav #3.1</a></li>
            <li><a href="#">Nav #3.2</a></li>
        </ul>
    </li>
</ul>

####################
#### JAVASCRIPT ####
####################
sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

###################
####### CSS #######
###################
ul#nav li ul {
    position: absolute;
    left: -9999px;
    top: 38px;
    display: block;
    width: 100px;
    background-color: transparent;
}
ul#nav li {
    position: relative;
}
ul#nav li ul li {
    float: none;
}
/* Links in the drop down lists start */
ul#nav li ul li a {
    clear: left;
    display: block;
    text-decoration: none;
    width: 100px;
    background-color: #333;
}
/* Links in the drop down lists end */
/* Making visible start */
ul#nav li:hover ul, #nav li.sfhover ul {
    left: auto;
}
/* Making visible end */

Answer 1

Я думаю, причина того, что он работает только в Firefox, или я должен сказать, работал только в Firefox, так как это было опубликовано так давно, заключается в том, что IE может потребоваться определенное расположение пикселей для атрибута top вместо 100%. Я бы порекомендовал попробовать 0px хотя бы для IE, у меня это сработало как минимум недавно.

Answer 2

Вам нужно сместить элемент LI контейнера слева и установить значение «top» во всплывающих окнах на 100%. (Проверено только в FF3.5)

ul#nav li {
    position: relative;
    float: left;
}

ul#nav li ul {
    position: absolute;
    left: -9999px;
    top: 100%;
    display: block;
    width: 100px;
    background-color: transparent;
}

Answer 3

Здесь:

 <li>
    <a>Nav #1</a>
    <ul>
       <li>Nav #1.1</li> 
    <ul>
 </li>

Для перемещения всего меню и его подменю. Вам нужно установить значение float: left в

not

#menu ul li a { 
    float: none;
}
#menu ul li { 
    float: left;
}

Еще одна вещь, это не относится к вашей проблеме. Но, я думаю, вы должны использовать display: none / block вместо left: -9999px / auto.

Надеюсь, это поможет.

Answer 4

На самом деле это не объясняется, но я бы рекомендовал добавлять и вычитать атрибут класса, а не изменять его (getAttribute, removeAttribute и т. Д.) Кроме того, в имени вашего класса есть пробел ("sfhover"), что, вероятно, не очень хорошая идея.