Q: CSS3 Menus and a Select menu - not working in IE & Firefox I have created a CSS3 Drop down menu, works perfectly
Until I was tasked with adding a select box to choose a pre-set theme
This then gave out problems with IE 11 and Edge and Firefox
The following is just a very basic version of the script I have ran but the outcome is still the same
HTML:


#menu {
  background: green;
}
#menu li {
  list-style: none;
  float: left;
  padding: 5px;
}
#subMenuItems {
  display: none;
  background: red;
  background-color: red;
}
#subMenuItems li {
  float: none !important;
}
#menu li:hover #subMenuItems {
  display: block;
}
<div id="menu">
  <ul id="menuContent">
    <li>
      Item 1
      <ul id="subMenuItems">
        <li>
          <select>
            <option>1</option>
            <option>1</option>
            <option>1</option>
            <option>1</option>
            <option>1</option>
            <option>1</option>
            <option>1</option>
          </select>
        </li>
      </ul>
    </li>
    <li>Item 2
      <ul id="subMenuItems">
        <li>Test1</li>
        <li>Test 2</li>
        <li>Test 3</li>
      </ul>
    </li>
    <li>Item 3
      <ul id="subMenuItems">
        <li>Test 1</li>
        <li>
          <select name="D1">
            <option>1</option>
            <option>1</option>
            <option>1</option>
            <option>1</option>
            <option>1</option>
            <option>1</option>
            <option>1</option>
          </select>
        </li>
        <li>Test 2</li>
        <li>Test 3</li>
      </ul>
    </li>
  </ul>
</div>


Replicating what I get:
1) Hover over Item 1 or Item 3 to see the menu
2) Inside this menu there will be a select
3) Click on the select arrow to expand the menu
4) move your mouse cursor off the menu (so that it hides)
In IE 11 and Edge
You should see the drop down menu from the select remains visible
Firefox will hide everything (as it should)
However repeat steps 1 and 2
And the select drop down is still expended
When you hover your mouse into the drop down it hides the menu even tho you are still hovering over the li element and the menu should remain visible
My Questions:
Is this just a bug with the browser?
A bug with my code?
Any solutions proposed?

A: that is not really a good use of select function as that is a form-element-submit element.
select was created for forms so that someone can load in a selection for it to be submitted.
I imagine you can use select in a menu structure but it will need to include a mouse event so the select action has something to do.
   this is the code I played with:

 <!DOCTYPE html>
 <html>
 <head>
 <style>
 #menu {
  background: green;
  }
  #menu li {
  list-style: none;
  float: left;
  padding:5px;
   }
   #subMenuItems {
   display: none;

    background-color: red;
  }
  #subMenuItems li {
    float: none !important;
   }
  #subMenuItems li:hover {

  color: yellow;
  background-color: black;

    }


 #menu li:hover #subMenuItems {

  display: block;
  }
</style>
</head>
<body>
<div id="menu">
 <ul id="menuContent">
  <li>
  Item 1
  <ul id="subMenuItems">
   <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</li>
<li>Item 2
  <ul id="subMenuItems">
    <li>Test1</li>
    <li>Test 2</li>
    <li>Test 3</li>
  </ul>
</li>
  <li>Item 3
  <ul id="subMenuItems">
    <li>a</li>
    <select name="D1">
        <option onclick='Javscript:alert("box1")'>1</option>
        <option onclick='Javscript:alert("box2")'>2</option>
        <option onclick='Javscript:alert("box3")'>3</option>
  </select>
   <li>b</li>
    <li>c</li>
  </ul>
  </li>
  </ul>
  </div>
  </body>
  </html>

