Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I just refactored entire HTML code and started working on CSS. I've done this up to now I hope it helps, somewhat.</p> <p><a href="http://jsfiddle.net/cgRA2/19/" rel="nofollow noreferrer">http://jsfiddle.net/cgRA2/19/</a></p> <pre><code>&lt;div class="layout_nemo"&gt; &lt;aside id="models"&gt; &lt;section class="nestingList"&gt; &lt;div id="new_url_top"&gt; &lt;a href="#" class="track-click"&gt;A5 series&lt;/a&gt; &lt;/div&gt; &lt;div style="clear:both; margin:0px; padding:0px;"&gt;&lt;/div&gt; &lt;div class="flyout" style="border:3px solid #000;"&gt; &lt;div class="inner"&gt; &lt;div class="col" style="float:right;"&gt; &lt;ul class="nav"&gt; &lt;li&gt;&lt;a href="#" class="track-click"&gt;A5 Coupé&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" class="track-click" &gt;A5 Sportback&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="articles" style="float:left;"&gt; &lt;article class="visuallyhidden"&gt; &lt;select name="bvgn " style="border:1px solid #000; height:30px;width:180px;"&gt; &lt;option&gt;option1&lt;/option&gt; &lt;option&gt;option2&lt;/option&gt; &lt;option&gt;option3&lt;/option&gt; &lt;option&gt;option4&lt;/option&gt; &lt;/select&gt; &lt;select name="bvgn " style="border:1px solid #000; height:30px;width:180px;"&gt; &lt;option&gt;option5&lt;/option&gt; &lt;option&gt;option6&lt;/option&gt; &lt;option&gt;option7&lt;/option&gt; &lt;option&gt;option8&lt;/option&gt; &lt;/select&gt; &lt;/article&gt; &lt;article class="visuallyhidden" style="border:7px solid #3C0; height:30px;"&gt;content here&lt;/article&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/section&gt; &lt;/aside&gt; </code></pre> <p></p> <p>The effect and everything concerned around the dropdown is not happening inside HTML/CSS, and its not Firefox problem because of that. I thought you must have been using some external JavaScript to do this, and I was right.</p> <p>Problem is inside your <strong>js.js</strong> file, that you have included into external files for the jsFiddle example page. One part of the problem is that the file is combined with everything else and is part of something much bigger. I would really hate going into it after doing html/css.</p> <p>So the part of jQuery that is making the problem is located around:</p> <ul> <li>line 4836</li> <li>line 4841</li> <li>line 4937</li> <li>line 4942</li> <li>line 5074</li> </ul> <p>If you can get that spaghetti code out and do something with it... Good luck.</p> <p>Someone posted a solution here <a href="https://stackoverflow.com/questions/15749315/containing-div-loses-focus-when-mousing-over-select-dropdown">Containing div loses focus when mousing over select dropdown</a></p>
    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.
    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