jquery时尚下拉选择框

1、新建html文档。

3、书写css代码。ul.newList * { margin: 0; padding: 0; }ul.n髫潋啜缅ewList a { color: #000; text-decoration: none; display: block; }ul.newList { margin: 0; padding: 0; list-style: none; color: #000; width: 290px; background: #fff; position: absolute; border: 1px solid #ccc; top: 22px; left: 0; overflow: auto; z-index: 9999; }.newListSelected { width: 285px; color: #000; height: 19px; padding: 3px 0 0 6px; float: left; background: url(../images/select-bg.png) no-repeat; }.newListSelected span { width: 284px; display: block; }ul.newList li a { padding: 3px 8px; display: block; }ul.newList li a:focus { -moz-outline-style: none; }.selectedTxt { width: 258px; overflow: hidden; height: 16px; padding: 0 23px 0 0; }.hiLite { background: #650101!important; color: #fff!important; }.hiLite a { background: #650101!important; color: #fff!important; }.newListHover { background: #ccc!important; color: #000!important; cursor: default; }.newListSelHover, .newListSelFocus { background-position: 0 -22px; cursor: default; }.newListOptionTitle { font-weight: bold; }.newListOptionTitle ul { margin: 3px 0 0; }.newListOptionTitle li { font-weight: normal; border-left: 1px solid #ccc; }#win-xp .newListSelected { background: #FFF url(../images/dropdown.gif) no-repeat scroll 155px 1px; border: 1px solid #A5ACB2; color: #000; height: 17px; margin-bottom: 10px; padding: 0; width: 173px; }#win-xp .newListSelected div { display: block; font-size: 0.85em; padding: 2px 21px 2px 4px; text-align: left !important; width: 149px; }#win-xp ul.newList { list-style: none; color: #000; width: 172px; background: #fff; border: 1px solid #000; top: 22px; left: 0; height: auto; overflow: auto; font-size: 0.85em; text-align: left!important; position: absolute; z-index: 9999; }#win-xp ul.newList li { padding: 2px 5px!important; border-bottom: 1px solid #cccccc; }#win-xp .hiLite { background: #316ac5!important; color: #fff!important; }#win-xp .newListHover { background: #ccc!important; color: #000!important; cursor: default; }#win-xp .newListSelHover { cursor: default; }#win-xp .newListSelHover, #win-xp .newListSelFocus { background-position: auto; }#win-xp .newListSelHover div, #win-xp .newListSelFocus div { font-weight: bold; }

5、代码整体结构。