Note that there are some explanatory texts on larger screens.

plurals
  1. POVideo interferes with dropdown?
    primarykey
    data
    text
    <p>I'm trying to get a dropdown menu to open when I hover over the parent link, and it works, except that when there's a video on the page, it doesn't seem to work... I'm not sure why. I've tried playing around with the z-indexes, but nothing seems to work. The submenu items just kind of blink in and out, but the whole menu doesn't stay open... Below is the jquery code, the CSS, and then the html markup... Not sure what I'm doing wrong... </p> <pre><code>var timeout = 500; var closetimer = 0; var ddmenuitem = 0; function plinks_open() { plinks_canceltimer(); plinks_close(); ddmenuitem = $j(this).find('ul').css('visibility', 'visible');} function plinks_close() { if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');} function plinks_timer() { closetimer = window.setTimeout(plinks_close, timeout);} function plinks_canceltimer() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null;} } $j('document').ready(function() { $j('#plinks &gt; li').bind('mouseover', plinks_open) $j('#plinks &gt; li').bind('mouseout', plinks_timer) }); </code></pre> <p>Here's the css:</p> <pre><code>#plinks { margin: 0; padding: 0 background: #fff; } #plinks li { float: left; list-style: none; background: #fff; } #plinks li a { display: block; background: #fff; text-decoration: none; white-space: nowrap } #plinks li a:hover { background: #fff} #plinks li ul { margin: 0; padding: 0; text-transform:lowercase; position: absolute; visibility: hidden; background: #fff; width: 400px; text-align:left; font-size: 14px; z-index: 9999; } #plinks li ul li { float: none; display: inline; text-indent:5px; } #plinks li ul li a:hover { background: #fff } </code></pre> <p>Here's the HTML markup:</p> <pre><code>&lt;div id="primary-links"&gt; &lt;ul id="plinks"&gt; &lt;li&gt;&lt;a href="/blog"&gt;home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/"&gt;portfolio&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/blog/?page_id=2"&gt;about&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/blog/?page_id=215"&gt;license&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/blog/?page_id=217"&gt;links&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/blog/categories.php"&gt;categories&lt;/a&gt; &lt;ul style="height:200px; display: block; background-color: #fff"&gt; &lt;li&gt;Sublink 1&lt;/li&gt; &lt;li&gt;Sublink 2&lt;/li&gt; &lt;li&gt;Sublink 3&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="/blog/?page_id=356"&gt;archives&lt;/a&gt;&lt;/li&gt; &lt;li class="last"&gt;&lt;a href="/blog/?page_id=219"&gt;connect&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!-- /primary-links --&gt; </code></pre>
    singulars
    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.
 

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