Why is the dropdown box of SELECT tag shown at wrong place?

Question

My CSS file doesn't touch the tag 'select' at all, also no CSS classes are related to the tag 'select'. But when showing in browser, the dropdown box which contains values are shown at the wrong place, as in the screenshot below:

Why is it so? Or is it a bug of Chrome? 'cause as I know we can't change this kind of dropdown box position neither by CSS nor JS. I want it back to the normal place just right below the SELECT element!!!

This is the portion of the HTML for the above mentioned 'select' tag:

<select id="sel_user">   
  <option value="39" >Bùi Ngọc Sơn &lt;son.bui@tamtay.vn&gt;</option>   
  <option value="19" >Cao Thanh Hải &lt;hai.cao@tamtay.vn&gt;</option>   
  <option value="15" >Cao Thanh Thảo &lt;thao.cao@tamtay.vn&gt;</option>   
  <option value="72" >Cao Thị Lan Anh &lt;anh.cao@tamtay.vn&gt;</option>    
  ...
</select>

The id of the select tag is just for JS, it is not linked with any CSS item.

Answer 1

I don,t get it...I tried your select list but it ran very well.

Is your select list working in other browsers?

I think there is some error in your HTML code.