Incorrectly marked as duplicate
JS Fiddle (Problem)
http://jsfiddle.net/xrd2b42L/12/
JS Fiddle (With Solution)
http://jsfiddle.net/xrd2b42L/21/
Problem
I have a drop down menu powered by JQuery. If I put a select tag within the menu, and try to select an option, the menu automatically closes without me being able to choose an option.
This bug is not cross browser consistent. This menu works correctly in Firefox 37.01, Safari 5.1.7 and also worked in Chrome 39.
I've tried changing the JavaScript event powering the menu to a click event, but the bug still occurs.
The bug occurs in IE11 and Chrome 41.0.2272.118.
An help would be appreciated.
Update
I've updated the fiddle to use a mouseenter event. The issue still occurs. Kano has pointed out the issue seems to be the mouse leave event being triggered when I hover over an option within the select.
Fix
After 4 long hours I've managed to resolve the issue. It turns out that the mouse leave event is triggered on the select element even though the select element is a child of the element that the handlers attached to. I've fixed the javascript below so that the code now functions correctly in case anyone else experiences the issue.
HTML
<html>
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</header>
<body>
<ul class = 'contentMenu jsGeneralNavigation'>
<li>Menu Item 1</li>
<li>Drop Down Menu 1
<ul>
<li>No Select</li>
<li>
<select>
<option value ='Option 1'>Option 1</option>
<option value ='Option 2'>Option 2</option>
<option value ='Option 3'>Option 3</option>
</select>
<li>No Select</li>
</ul>
</ul>
</body>
</html>
CSS
/******************************************************
* CSS Reset
* http://meyerweb.com/eric/tools/css/reset/
* v2.0 | 20110126
******************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*************************************************************
* End CSS Reset
*************************************************************/
ul.contentMenu li {
float: left;
position: relative;
list-style: none;
text-align: center;
color: #000;
cursor: default;
display: block;
font-size: 12px;
text-decoration: none;
padding:5px;
border-radius: 3px 3px 0px 0px;
border: 1px #ddd solid;
border-bottom:0px;
background-color: #F0F0F0;
margin-right: 5px;
}
ul.contentMenu li.pesudoClassHover {
background-color: #ddd;
}
ul.contentMenu ul {
z-index: 10;
display: none;
position: absolute;
top: 22px;
left: -1px;
box-shadow: 5px 5px 5px #aaa;
border-top:1px solid #ddd;
border-top-right-radius: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
background-color: #fff; /* Important fixes Ie.7. bug where relatively positioned element overlaps absolutely positioned element */
}
/* Keep this seperate and above first child declaration otherwise it breaks I.e. 8 */
ul.contentMenu ul li {
border: none; /* Important - Reset border */
border-radius: 0px; /* Important - Reset border */
padding:5px;
margin: 0px;
float: none;
text-align: left;
text-shadow: none;
background-color: #fff;
border-left:1px solid #ddd;
border-right:1px solid #ddd;
border-bottom:1px solid #ddd;
}
ul.contentMenu ul li a {
display: block;
border: none;
text-decoration: none;
color:#000;
padding:5px;
font-size: 12px;
}
ul.contentMenu li ul li:hover {
background-color: #ddd;
}
ul.contentMenu ul li:last-child {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
ul.contentMenu li ul li a:hover {
background-color: #ddd;
}
JavaScript (With Solution)
$(document).ready(function()
{
//Javascript for desktop navigation
$('ul.jsGeneralNavigation > li').on('mouseenter', function()
{
$(this).addClass('pesudoClassHover');
$(this).children('ul').show();
});
//Javascript for desktop navigation
$('ul.jsGeneralNavigation > li').on('mouseleave', function(e)
{
//This is the fix to prevent the select triggering the mouse leave
if(e.target.tagName.toLowerCase() != "select") {
$(this).removeClass('pesudoClassHover');
$(this).children('ul').hide();
}
});
});
