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

Question

Я загрузил Refresh template by Styleshout.com, так как мне это очень нравится. Но, к сожалению, в нем не было ни одного выпадающего меню, а только обычное меню.

Итак, я попытался интегрировать выпадающее меню which I found a nice tutorial for.

Он почти работает - почти. Вот результат: the template on my webspace.

Меню открываются - но не в том месте. Зачем? Что случилось с моей реализацией? Все 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

Вы должны плавать контейнер LI слева и установите «сверху» значения на всплывающие коробки до 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 2

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

Answer 3

Здесь:

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

Чтобы переместить все меню и подменю. Вы должны установить поплавок: левый на < литий > не < в >

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

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

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

Answer 4

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