Question

I have a nested dropdown list created using the latest version of Twitter BootStrap. I need to have a select list containing many elements in the nested dropdown. I am able to get the nested dropdown working fine and the select option shows up no problem. Unfortunately in IE9 after clicking into the select list, moving the mouse over any item causes the dropdown to close. This problem does not manifest in other browsers. What’s even more unlucky is that I must support IE7+ as part of this work.

There is a jsfiddle of the error at: http://jsfiddle.net/GtbSE/2/

Can anybody shed any light?

Answer 1

From your example I can change it to allow the dropdown within the ‘channel’ menu option in IE with a few minor changes to your fiddle: http://jsfiddle.net/amelvin/XxSTF/ – but you’ll need to re-style.

I wonder if bootstrap was getting confused by the dropdown-menu items.

<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(); });