Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery.dropdownPlain.js dosnt work in ie8
    text
    copied!<p>can anybody tell me which class/es or id/s is/are the booman for my script. Its an multilevel navigation menu, quite easy - but it wont work in ie8 - in firefox, safari there is no problem.</p> <p>the problem is following.... in mozilla firefox an safari the submenu will open... but in ie8 there is no reaction.</p> <p>i already solved the problem... the solution was the missing css class that makes the submenu visible</p> <p><strong><code>ul.dropdown li:hover &gt; ul { visibility: visible; }</code></strong></p> <h2>js</h2> <p>jquery-1.6.2.min.js</p> <pre><code> $(function(){ $("ul.dropdown li").hover(function(){ $(this).addClass("hover"); $('ul:first',this).css('visibility', 'visible'); }, function(){ $(this).removeClass("hover"); $('ul:first',this).css('visibility', 'hidden'); }); $("ul.dropdown li ul li:has(ul)").find("a:first").append(" &amp;raquo; "); }); </code></pre> <h2>style.css</h2> <pre><code> /*Navigation*/ #tophead { background:#1b232f; height:50px; display:block; } #topnav { float:right; } #topnav li { float:left; margin:10px 10px 0px 0px; } #topnav li a { height:30px; display:block; text-indent: -99999px; } ul.dropdown ul{ visibility: hidden; position:absolute; } ul.dropdown li.hover, ul.dropdown li:hover { background: #F3D673; color: black; position: relative; } ul.dropdown li.hover a { color: black; } </code></pre> <h2>html</h2> <pre><code>&lt;div id="tophead"&gt; &lt;div class="wrapper"&gt; &lt;div class="topnav_logo"&gt;&lt;/div&gt; &lt;ul id="topnav" class="dropdown"&gt; &lt;li class="home"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li class="products"&gt;&lt;a href="#"&gt;Produkte&lt;/a&gt; &lt;ul class="sub_menu"&gt; &lt;li&gt;&lt;a href="#"&gt;Point1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Point2&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="shop"&gt;&lt;a href="#"&gt;Shop&lt;/a&gt;&lt;/li&gt; &lt;li class="projects"&gt;&lt;a href="#"&gt;Projekte&lt;/a&gt;&lt;/li&gt; &lt;li class="contact"&gt;&lt;a href="#"&gt;Kontakt&lt;/a&gt;&lt;/li&gt; &lt;li class="login"&gt;&lt;a href="#"&gt;Login&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance

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