此次任務是將Lativ網站購物車改為下滑��單…

先來欣賞一下其它網站的下滑功能:

(這是�單 未展開圖)

(這是在IE6下 展開圖)

(這是在IE7下 展開圖) (ps: Firefox和IE7圖一樣)

很明顯的�SELECT在IE6的z-index無�大bug，被巧妙的解決了，就是....直接隱�起來比較快，至於�單下方線跑去哪了，就�得而知。

好的，知�目標以後，就開始動工�，先來到Lativ的大本營，並製作出施工�圖 。(如下圖)
步驟很簡單明瞭，就是，滑鼠移至�上"購物清單XXX"字樣，購物車清單自動下"滑"出來

先撰寫出滑出�單，並�在定�上。(如下圖)

很好，SELECT的bug在IE6下，一覽無�的出�，但是我們並�打算使用隱�大法解決，所以，決定�考兩種方�，一種是jace大大�供的，��照這，�一種是由作者Hedger Wang�供的方�，��照這，基本概念大致上就是使用iframe覆蓋select，因為之�用�jace大大�供的方�，這次嘗鮮一下，使用佛心Hedger Wang的方�，加入CSS設定，很方便的�功解決select覆蓋�題。(如下圖)

是的，出�了詭異的狀�，SELECT�蓋�了"DIV的邊框"，�次仔細研讀文�，原始範例中，DIV的邊框並沒被SELECT��，而是正常的一樣蓋在SELECT上，於是，完全按照原始CSS設定的方�，�外在�顯示的內容，包上一層DIV，使用.select-free .bg � 去設定�單的外框CSS，果然，尊�原著是很��的，按照原始方�一修改，�單終於順利的"完全覆蓋"�SELECT了。(如下圖)

�自：http://blog.hedgerwow.com/

[CSS設定部份]

.select-free
{
position:absolute;
z-index:10;
cursor:move;
overflow:hidden;/*must have*/
width:33em;/*must have for any value*/;
}
 
.select-free iframe
{
display:none;/*sorry for IE5*/
display/**/:block;/*sorry for IE5*/
position:absolute;/*must have*/
top:0;/*must have*/
left:0;/*must have*/
z-index:-1;/*must have*/
filter:mask();/*must have*/
width:3000px;/*must have for any big value*/
height:3000px/*must have for any big value*/;
}

[BODY設定部份]

<div class="select-free">
    <div>內容<!--[if lte IE 6.5]><![endif]--></div>
</div>

使用上，相當方便，跟�滷肉飯一樣，感�原創者