[JS} Select Box 공부중

1. id값이랑 태그랑 작성+ㅁ+)!
<div id="select_box" class="select_box">
 <h3>셀렉트박스</h3>
 <ul>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
 </ul>
</div>

2. 스크립트를 심어 준다.(혹은 onmouseover를 이용한다.)<script type="text/javascript">
 selectBox("select_box");
</script>

3. 조금만 꾸며주자....너무 썰렁하니깐...=ㅁ=);
<style type="text/css">
div.select_box{margin:20px;}
div.select_box h3{font-size:14px;font-weight:normal;color:999;cursor:pointer;border:1px solid #cdcdcd;width:140px;padding:5px 5px;}
div.select_box ul{border:1px solid #cdcdcd;width:150px;border-top:none;}
div.select_box li{padding:5px;}
div.select_box a{color:#666;}
div.select_box a:hover{color:#000;text-decoration:underline;}
</style>

4. 두둥 이제 스크립트 시작...ㅠ_ㅠ)
<script type="text/javascript" src="">
function selectBox(containerID) {
//selectBox를 불러왔다!

 var container = document.getElementById(containerID);
 var selectBoxTitle = container.getElementsByTagName("h3").item(0);
 var selectBoxList = container.getElementsByTagName("ul").item(0);
//일단 소스가 길어지니 압축할 건 압축 해놓자

 selectBoxList.style.display = "none";
//처음엔 리스트가 감추어져 있어야지!

 selectBoxTitle.onmouseover = function() {
  selectBoxList.style.display = "block";
 }
//타이틀 부분에 마우스를 올리면 리스를 보여줘+ㅁ+)!
 selectBoxList.onmouseover = function() {
  selectBoxList.style.display = "block";
 }
//리스트에 마우스를 올려도 계속 보여줘!

 selectBoxTitle.onmouseout = function() {
  selectBoxList.style.display = "none";
 }
//타이틀에서 마우스가 없으면 리스트를 감춰줘
 selectBoxList.onmouseout = function() {
  selectBoxList.style.display = "none";
 }
//리스트에 마우스가 없으면 리스트를 감춰줘!
}
</script>