Does an HTML select lose document flow when placed inside a CSS drop menu? -

okay, question create confusion, it's way can think ask it.

here's gist of what's occurring. have menu: edit: here's requested fiddle (note: have view in ie8 in order replicate issue) fiddle

<ul> <li class="dropdown">     <a href="#">sort</a>     <ul class="dropdown-menu">         <li>link 1</li>         <li>link 2</li>     </ul> </li> <li class="dropdown">     <a href="#">filter</a>     <ul class="dropdown-menu">         <li>             <div class="usedproducts-filter-container">                  <select>                     <option>option 1</option>                     <option>option 2</option>                 </select>             </div>         </li>     </ul> </li> 

i'm using css style , create drop down functionality:

ul {     position: relative;     padding: 1em;     background-color: #eeeeee;     border: 1px solid #333333; }  ul > li {     display: inline; }  ul > li > {     color: #666666;     margin-left: 1em;     padding: 1em; }  ul > li:hover > {     color: #111111; }  ul > li > ul {     position: absolute;     padding: 1em;     background-color: #cccccc;     border: 1px solid #666666;     display: none; }  ul > li:hover > ul {     display: block; }  ul > li > ul > li {     display: block; } 

when hover on sort menu, displays, , i'm able click link. however, when hover on filter menu, displays drop down, can move mouse around within drop down fine, when click select box open , move mouse inside select , option, whole drop down menu disappears. it's if select box isn't contained within ul drop down.

does have idea how solve without using js? also, think important state in ie8. have no idea how it's functioning in other browsers because being designed supporting ie8 only.(don't ask, it's long story).

yes, indeed because drop-down part of <select> outside of document (it ui element).

if can, consider using <select size="n">, n being suitable number. change drop-down more "option list"-type element, compatible :hover.