Databases
StackOverflow2013
Postsdbo
POWhy doesn't this drop down menu work?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy doesn't this drop down menu work?
    text
    copied!<p>I've download the <a href="http://www.styleshout.com/templates/preview/Refresh1-0/index.html" rel="nofollow noreferrer">Refresh template by Styleshout.com</a> since I really like it. But unfortunately, there was no drop down menu in it, only a normal menu.</p> <p>So I tried to integrate a drop down menu <a href="http://www.htmldog.com/articles/suckerfish/dropdowns/" rel="nofollow noreferrer">which I found a nice tutorial for</a>.</p> <p>It does almost work - almost. Here's the result: <a href="http://wp1080088.wp029.webpack.hosteurope.de/Refresh1-1/" rel="nofollow noreferrer">the template on my webspace</a>.</p> <p>The menus are opened - but at the wrong location. Why? What's wrong with my implementation? All 3 drop down lists are opened under the first item.</p> <p>I hope you can help me. Thanks in advance!</p> <p>PS: Here's the code:</p> <pre><code>#################### ####### HTML ####### #################### &lt;ul id="nav"&gt; &lt;li&gt;&lt;a href="index.html"&gt;Nav #1&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Nav #1.1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Nav #1.2&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="index.html"&gt;Nav #2&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Nav #2.1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Nav #2.2&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="index.html"&gt;Nav #3&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Nav #3.1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Nav #3.2&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; #################### #### JAVASCRIPT #### #################### sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i&lt;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 */ </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload