jQuery結合CSS制作漂亮的select下拉菜單

 　　對於我來說，標准的HTML元素(Select)已經讓我感到討厭。它不能夠正常的在IE浏覽器上顯示。還有一點就是他並不僅僅包含簡單的文本。本實例將完全摒棄select元素，通過JQuery和CSS來構建DropDown元素。

　　我們在進行表單設計時，可能要用到select下拉選項控件，遺憾的是，IE浏覽器默認的select控件外觀非常丑陋，而且不能用樣式來控制，不能在選項中添加圖片等信息。今天我將通過實例來講解如何用CSS和jQuery來制作漂亮的下拉選項菜單。

　　XHTML

　　?

1 2 3 4 5 6 7 8 9 10 <div id="dropdown">    <p>請選擇城市</p>    <ul>      <li><a href="#">長沙</a></li>      <li><a href="#">北京</a></li>      <li><a href="#">南京</a></li>      <li><a href="#">堪培拉</a></li>      <li><a href="#">多倫多</a></li>    </ul>  </div>

　　可以看出，我們使用div來替換下拉選項控件原生的select標簽。

　　CSS

　　?

1 2 3 4 5 6 7 8 9 #dropdown{width:186px; margin:80px auto; position:relative}  #dropdown p{width:150px; height:24px; line-height:24px; padding-left:4px; padding-right:30px;  border:1px solid #a9c9e2; background:#e8f5fe url(arrow.gif) no-repeat right 4px;  color:#807a62; cursor:pointer}  #dropdown ul{width:184px; background: