js 드 롭 다운 메뉴

  
  
  
  

   
   
   
   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
   
   
   
   
<html> 
   
   
   
   
<head> 
   
   
   
   
<title>test</title> 
   
   
   
   
<meta http-equvie="content-type" content="text/html"; charset="utf-8" /> 
   
   
   
   
<style type="text/css"> 
   
   
   
   
body,html{padding:0;margin:0;text-align:center;font:normal 14px 'arial'} 
   
   
   
   
#mainNavBar{ 
   
   
   
   
width:100%; 
   
   
   
   
background:#999; 
   
   
   
   
padding:10px 0; 
   
   
   
   
} 
   
   
   
   
#nav{ 
   
   
   
   
width:760px; 
   
   
   
   
height:30px; 
   
   
   
   
margin:0 auto; 
   
   
   
   
} 
   
   
   
   
#nav ul{ 
   
   
   
   
padding:0; 
   
   
   
   
margin:0; 
   
   
   
   
} 
   
   
   
   
#nav ul li{ 
   
   
   
   
position:relative; 
   
   
   
   
float:left; 
   
   
   
   
width:60px; 
   
   
   
   
height:30px; 
   
   
   
   
line-height:30px; 
   
   
   
   
overflow:hidden; 
   
   
   
   
list-style-type:none; 
   
   
   
   
} 
   
   
   
   
#nav ul li a{display:block;color:#fff;text-decoration:none;} 
   
   
   
   
#nav ul li a:hover{font-weight:bold;background:#666;} 
   
   
   
   
 
   
   
   
   
#subNav{ 
   
   
   
   
position:absolute; 
   
   
   
   
width:150px; 
   
   
   
   
top:30px; 
   
   
   
   
left:0px; 
   
   
   
   
padding:5px; 
   
   
   
   
background:#666; 
   
   
   
   
color:#fff; 
   
   
   
   
text-align:left; 
   
   
   
   
} 
   
   
   
   
#subNav a{text-decoration:none;font-weight:normal;display:block;} 
   
   
   
   
#subNav a:hover{color:#f00;background:#f00} 
   
   
   
   
</style> 
   
   
   
   
</head> 
   
   
   
   
<body> 
   
   
   
   
<div id="mainNavBar"> 
   
   
   
   
<div id="nav"> 
   
   
   
   
   <ul> 
   
   
   
   
   <li> 
   
   
   
   
    <a href="#">Add</a> 
   
   
   
   
    <div id="subNav"> 
   
   
   
   
     <a href="#">   </a> 
   
   
   
   
     <a href="#">    </a> 
   
   
   
   
    </div> 
   
   
   
   
   </li> 
   
   
   
   
   <li> 
   
   
   
   
    <a href="#">Edit</a> 
   
   
   
   
    <div id="subNav"> 
   
   
   
   
     <a href="#">    </a> 
   
   
   
   
     <a href="#">    </a> 
   
   
   
   
    </div> 
   
   
   
   
   </li> 
   
   
   
   
   <li> 
   
   
   
   
    <a href="#">Admin</a> 
   
   
   
   
    <div id="subNav"> 
   
   
   
   
     <a href="#">    </a> 
   
   
   
   
     <a href="#">    </a> 
   
   
   
   
     <a href="#">    </a> 
   
   
   
   
     <a href="#">  </a> 
   
   
   
   
    </div> 
   
   
   
   
   </li> 
   
   
   
   
   </ul> 
   
   
   
   
</div> 
   
   
   
   
</div> 
   
   
   
   
<script language="javascript"> 
   
   
   
   
var nav=document.getElementById("nav").getElementsByTagName("li"); 
   
   
   
   
for(i=0;i<nav.length;i++){ 
   
   
   
   
nav[i].onmouseover=function(){ 
   
   
   
   
this.style.fontWeight="bold"; 
   
   
   
   
this.style.overflow="visible"; 
   
   
   
   
this.style.background="#666666"; 
   
   
   
   
} 
   
   
   
   
nav[i].onmouseout=function(){ 
   
   
   
   
this.style.fontWeight="normal"; 
   
   
   
   
this.style.background="#999999" 
   
   
   
   
this.style.overflow="hidden"; 
   
   
   
   
} 
   
   
   
   
} 
   
   
   
   
</script> 
   
   
   
   
</body> 
   
   
   
   
</html>