jQuery ul 레이블 드롭다운 메뉴 데모 code_jquery

🎜 >



코드 복사

text-align:left;
background:#333;
}
#menu .arrow{ /* 메뉴 항목 오른쪽에 있는 작은 화살표 */
float: right;
padding-right:5px;
}
#menu>ul{height:30px;} /* 메뉴바가 없더라도 높이 유지 메뉴 항목. */
/* 첫 번째 수준 메뉴*/
#menu>ul>li{
text-align:center
display:inline-block;
width:80px; }
#menu>ul>li>a{color:#fff;}
#menu>ul>li:hover{배경:#666;}
/* 드롭다운 메뉴 표시줄*/
#menu>ul>li ul{
display:none;
width:150px;
위치:absolute;
배경:#c1cd94
box-shadow:2px 2px 2px 000 ;
-webkit-box-shadow:2px 2px 2px #000;
-moz-box-shadow:2px 2px 2px #123;
}
/* 드롭다운 메뉴의 메뉴 항목 */
#menu>ul>li>ul li{padding-left:5px; position:relative;}
#menu>ul>li>ul li>a{color:#000;}
#menu> ul>li>ul li:hover{배경:#d3dbb3;}
/* 레벨 3 이하의 메뉴 항목 위치 지정*/
#menu>ul>li>ul>li ul{left :150px; top:0px;}


JS 제어 코드입니다:




코드 복사

{
$( this).children('ul').slideUp('fast')
$('#menu>ul>ul li').bind( 'mouseover',function() //하위 메뉴에 대한 마우스 인 작업
{
$(this).children('ul').slideDown('fast')
}).bind(' mouseleave',function() / / 하위 메뉴의 마우스 아웃 작업
{
$(this).children('ul').slideUp('fast')
}); ;