自定义下拉菜单（选项有图片和注释）

CSS Code

01	/* UI Object */

02	.select{position:relative;z-index:1000;width:300px;font-family:'돋움',dotum;font-size:12px}

03	.select ul,.select li,.select dl,.select dt,.select dd,.select p{margin:0;padding:0}

04	.select li{list-style:none}

05	.select .select_label{height:12px;padding:4px 17px 3px 5px;border:1px solid #6e706f;border-right-color:#d4d5d7;border-bottom-color:#d4d5d7;background:#fff url(img/bu_arr_label.gif) no-repeat 100% 0;line-height:12px;cursor:pointer;_cursor:hand}

06	.select .select_label span{display:block;overflow:hidden;width:100%;white-space:nowrap;text-overflow:ellipsis}

07	.select .select_layer{display:none;position:absolute;top:19px;left:0;width:100%;z-index:1000;background:#fff}

08	.select .select_layer ul{border:1px solid #d4d5d7;border-left-color:#6e706f;border-top:0;padding:1px 2px 2px}

09	.select .select_layer ul li{display:inline-block;width:100%;vertical-align:top}

10	.select .select_layer ul li dl dt{display:block;*display:inline-block;overflow:hidden;width:100%;margin-top:1px;color:#666;line-height:100%;cursor:pointer;_cursor:hand}

11	.select .select_layer ul li dl dt span{display:block;overflow:hidden;padding:4px 3px 3px;white-space:nowrap}

12	.select .select_layer ul li dl{position:relative}

13	.select .select_layer ul li dl dd{display:none;position:absolute;top:-2px;left:100%;margin-left:-5px;padding-left:14px;background:url(img/bu_arr_tooltip.gif) no-repeat 10px -1px;color:#fff;line-height:15px}

14	.select .select_layer ul li dl dd p{padding:4px;border:1px solid #333;border-left:0;background:#4d4d4d;white-space:nowrap}

15	.select .select_layer ul li dl dd img{vertical-align:top}

16	.select .select_layer ul li.on dl dd{display:block}

17	.select .select_layer ul li.on dl dt{background:#eee;color:#000}

18	/* //UI Object */

HTML Code

01	<!-- UI Object -->

02	<div class="select" style="width:120px">

03

04	<div id="select_label" class="select_label">

05	<span>선택하세요</span>

06

</div>

07

08	<div id="select_layer" class="select_layer">

09

10

<ul>

11

<li>

12

<dl>

13	<dt><span>그레이트 피레니즈</span></dt>

14

<dd>

15	<p>하얀놈</p>

16

</dd>

17

</dl>

18

</li>

19

<li>

20

<dl>

21	<dt><span>골든 레트리버</span></dt>

22

<dd>

23	<p>누런놈</p>

24

</dd>

25

</dl>

26

</li>

27

<li>

28

<dl>

29	<dt><span>말라뮤트</span></dt>

30

<dd>

31	<p>무서운놈</p>

32

</dd>

33

</dl>

34

</li>

35

<li>

36

<dl>

37	<dt><span>허스키</span></dt>

38

<dd>

39	<p>멋있는놈</p>

40

</dd>

41

</dl>

42

</li>

43

<li>

44

<dl>

45	<dt><span>치와와</span></dt>

46

<dd>

47	<p><img src="img/temp.jpg" width="300" height="100" alt="쪼끄만 놈"></p>

48

</dd>

49

</dl>

50

</li>

51

</ul>

52

53

</div>

54

55

</div>

56	<!-- //UI Object -->

JavaScript Code

view source

print ?

01	<script type="text/javascript">

02	/* UI Pattern Script */

03	// 액션만 구현해 둔 테스트용 스크립트

04	function selectBoxAction() {

05	var label, layer, li;

06	label = document.getElementById("select_label");

07	layer = document.getElementById("select_layer");

08	li = layer.getElementsByTagName("LI");

09	label.onclick = function() {

10	layer.style.display = (layer.style.display != "block") ? "block" :"none";

11

}

12	for (var i=0;i<li.length;i++) {

13	li[i].onmouseover = function() { this.className = "on" }

14	li[i].onmouseout = function() { this.className = "" }

15	li[i].onclick = function() {

16	label.getElementsByTagName("SPAN")[0].childNodes[0].nodeValue = this.getElementsByTagName("DT")[0].childNodes[0].childNodes[0].nodeValue;

17	layer.style.display = "none";

18

}

19

}

20

}

21	selectBoxAction();

22	/* //UI Pattern Script */

23

</script>