select auto

標簽 select 橫行排列，滑鼠移至自動展開。

<div style="position: absolute">，position: absolute 元素的定位是在他所處上層容器的相對位置，在滑鼠移至自動展開後，不會影響下面內文移下。
#sel1 , #sel2 ,#sel3 { vertical-align: top;} ，vertical-align 對齊該行文字的最高位置，橫放 select 時，展開其中一個時不會影響其他 select 住下移。

<h3 style="text-align: center;">標簽 select 橫行排列，滑鼠移至自動展開。</h3> <div style="position: absolute"> <select id="sel1" onmouseover="this.size= 7" onmouseout="this.size= 1" onclick="this.size= 1" style="cursor: pointer; width: 100px;"> <option style='display:none;' >選擇國家 </option> <option class="OP" >中國 </option> <option class="OP" >香港 </option> <option class="OP" >美國 </option> <option class="OP" >英國 </option> <option class="OP" >澳洲 </option> <option class="OP" >南非 </option> <option class="OP" >韓國 </option> </select> <select id="sel2" onmouseover="this.size= 7" onmouseout="this.size= 1" onclick="this.size= 1" style="cursor: pointer; width: 100px;"> <option style='display:none;' >選擇地區 </option> <option class="OP" >名城 </option> <option class="OP" >新都城 </option> <option class="OP" >沙田第一城 </option> <option class="OP" >日出康城 </option> <option class="OP" >瓏門 </option> <option class="OP" > 太古城 </option> <option class="OP" >嘉湖山莊 </option> </select> <select id="sel3" onmouseover="this.size= 7" onmouseout="this.size= 1" onclick="this.size= 1" style="cursor: pointer; width: 100px;"> <option style='display:none;'>年齡 </option> <option class="OP" >0-10 </option> <option class="OP" >10-20 </option> <option class="OP >20-30 </option> <option class="OP" >30-40 </option> <option class="OP" >40-50 </option> <option class="OP" >50-80 </option> <option class="OP" >80-99 </option> </select> </div> <br><br> xxxxxxx xxxxxx xxxxx xx xxxxxx xx xxxxxxxx xxxxx xxxxxxx xxxxx xxxxxxxx xxxxxxxx xx xxxx xxxxxxx xxxxxx xxxxx xx xxxxxx xx xxxxxxxx xxxxx xxxxxxx xxxxx xxxxxxxx xxxxxxxx xx xxxx xxxxxxx xxxxxx xxxxx xx xxxxxx xx xxxxxxxx xxxxx xxxxxxx xxxxx xxxxxxxx xxxxxxxx xx xxxx xxxxxxx xxxxxx xxxxx xx xxxxxx xx xxxxxxxx xxxxx xxxxxxx xxxxx xxxxxxxx xxxxxxxx xx xxxx xxxxxxx xxxxxx xxxxx xx xxxxxx xx xxxxxxxx xxxxx xxxxxxx xxxxx xxxxxxxx xxxxxxxx xx xxxx xxxxxxx xxxxxx xxxxx xx xxxxxx xx xxxxxxxx xxxxx xxxxxxx xxxxx xxxxxxxx xxxxxxxx xx xxxx xxxxxxx xxxxxx xxxxx xx xxxxxx xx xxxxxxxx xxxxx xxxxxxx xxxxx xxxxxxxx xxxxxxxx xx xxxx xxxxxxx xxxxxx xxxxx xx xxxxxx xx xxxxxxxx xxxxx xxxxxxx xxxxx xxxxxxxx xxxxxxxx xx xxxx xxxxxxx xxxxxx xxxxx xx xxxxxx xx xxxxxxxx xxxxx xxxxxxx xxxxx xxxxxxxx xxxxxxxx xx xxxx xxxxxxx xxxxxx xxxxx xx xxxxxx xx xxxxxxxx xxxxx xxxxxxx xxxxx xxxxxxxx xxxxxxxx xx xxxx xxxxxxx xxxxxx xxxxx xx xxxxxx xx xxxxxxxx xxxxx xxxxxxx xxxxx xxxxxxxx xxxxxxxx xx xxxx <style> #sel1 , #sel2 ,#sel3 { vertical-align: top; background-color: silver; } .OP:hover { background-color: deepskyblue ;} </style>

00