Note that there are some explanatory texts on larger screens.

plurals
  1. POMy Dropdown menu works right on every browser but IE 7. Why?
    primarykey
    data
    text
    <p>I'm making some basic drop down menus based on <a href="http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/" rel="nofollow noreferrer">this tutorial</a> So its all dandy except for IE7. It appears when you hover on it but when you move the mouse from the main element to the ones below it it hides again.</p> <pre><code>/* General */ #cssdropdown { position:absolute; right:0px; top:0px; font-size:medium; font-weight:bold; } #cssdropdown, #cssdropdown ul { list-style: none; } #cssdropdown, #cssdropdown * { padding: 0; margin: 0; color:Navy; text-decoration:none; } /* Head links */ #cssdropdown li.headlink { width: 150px; float: left; background-color: #e9e9e9; text-align: center; height:35px; } #cssdropdown li.headlink a { display: block; padding:7px;} /*7px*/ /* Child lists and links */ #cssdropdown li.headlink ul { display: none; text-align: left; background-color:#e9e9e9; } /*#cssdropdown li.headlink:hover ul { display: block; }*/ &lt;--I've tried this via JS below #cssdropdown li.headlink ul li a { padding:5px;} #cssdropdown li.headlink ul li a:hover { background-color: #333; color:White; } </code></pre> <p>And here's the jQuery I used per their instructions to show the menu as an IE fix. (Note it works identical when I use pure CSS or CSS &amp; jQuery even in IE 7. All other browsers work fine.</p> <pre><code>$(document).ready(function () { $('li.headlink').hover( function () { $('ul', this).css('display', 'block'); }, function () { $('ul', this).css('display', 'none'); }); }); </code></pre> <p>and finally my HTML:</p> <pre><code>&lt;ul id="cssdropdown"&gt; &lt;li class="headlink"&gt; &lt;a href="../Pages/MainMenu.aspx"&gt;Main Menu&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="www.google.com"&gt;Google&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="www.yahoo.com"&gt;Yahoo&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="www.msn.com"&gt;MSN&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>I do have jQuery linked properly.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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