Hosting the selected list in the Twitter BootStrap drop-down list (IE 9 specifier)

Question

I have a nested dropdown created using the latest Twitter BootStrap. I need to have a select list containing many items in a nested drop-down list. I can make the nested popup panel work fine, and the selection option does not cause any problems. Unfortunately, in IE9, after clicking on the selection list, moving the mouse over any item closes the drop-down list. This problem does not appear in other browsers. Even more unfortunate is that I have to support IE7 + as part of this work.

There is jsfiddle error: http://jsfiddle.net/GtbSE/2/

Can anyone shed some light?

Answer 1

In your example, I can change it to allow a drop-down menu in the "channel" menu in IE with a few minor changes to your fiddle: http://jsfiddle.net/amelvin/XxSTF/ - but you will need to rebuild the style.

I wonder if the boot block is confused using the dropdown menus.

<span class="dropdown" id="filter-add"> <a href="#filter-add" id="addFilter" class="dropdown-toggle" data-toggle="dropdown" > More </a> <ul id="Channels" class="nav nav-pills"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Channel</a> <ul class="dropdown-menu"> <li> <select> <option value="1" >LIst Item 1</option> <option value="2" >LIst Item 2</option> <option value="3" >LIst Item 3</option> <option value="4" >LIst Item 4</option> <option value="5" >LIst Item 5</option> <option value="6" >LIst Item 6</option> </select> </li> </ul> </li> <li><a>Cancel</a></li> </ul> </span> $('.dropdown select').click(function(e) { e.stopPropagation(); }); $("#Channels").hide(); $("#addFilter").click(function() { $("#Channels").show(); });