J-Query 메뉴 질문 드립니다.
본문
아래의 코드는 J-Query 를 사용한 드롭다운 레이어 메뉴 입니다.
그런데, 코드를 수정해 보면 메인메뉴와 서브메뉴가 동시에 바뀝니다.
글씨 크기, 글씨 위치, 레이어의 크기, 레이어의 색상 등.. 을 별도로 변경하고 싶은데
어떻게 하면 좋을까요?
CSS
<style>
ul.menu li{
float: left;
width: 130px;
height: 40px;
background-color:#ef3e36;
position: relative;
}
ul.menu li a{
display: block;
width: 100%;
height:40px;
line-height: 40px;
text-indent: 10px;
font-weight: bold;
color:#FFF;
text-decoration: none;
}
ul.menu li a:hover{
background-color:#900;
}
ul.menu li ul.sub{
position: absolute;
}
ul.menu{
zoom: 1;
}
ul.menu:after{
height: 0;
visibility: hidden;
content: ".";
display: block;
clear: both;
}
</style>
JAVASCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul.sub").hide();
$("ul.menu li").hover(function(){
$("ul:not(:animated)",this).slideDown("fast");
},
function(){
$("ul",this).slideUp("fast");
});
});
</script>
HTML
<!--- 드롭다운 메뉴 --->
<div style="float:left">
<ul class="menu">
<li><a href="#">ABOUT</a>
<ul class="sub">
<li><a href="#">ABOUT KOTEKA</a></li>
<li><a href="#">CORE TECH</a></li>
<li><a href="#">PRODUCTS</a></li>
<li><a href="#">NOTICE</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">SHOP</a></li>
</ul>
</li>
<li><a href="#">CORE</a>
<ul class="sub">
<li><a href="#">ABOUT KOTEKA</a></li>
<li><a href="#">CORE TECH</a></li>
<li><a href="#">PRODUCTS</a></li>
<li><a href="#">NOTICE</a></li>
</ul>
</li>
<li><a href="#">PRODUCTS</a>
<ul class="sub">
<li><a href="#">ABOUT KOTEKA</a></li>
<li><a href="#">CORE TECH</a></li>
<li><a href="#">PRODUCTS</a></li>
</ul>
</li>
<li><a href="#">NOTICE</a>
<ul class="sub">
<li><a href="#">ABOUT KOTEKA</a></li>
<li><a href="#">CORE TECH</a></li>
<li><a href="#">PRODUCTS</a></li>
<li><a href="#">NOTICE</a></li>
</ul>
</li>
<li><a href="#">CONTACT</a>
<ul class="sub">
<li><a href="#">ABOUT KOTEKA</a></li>
<li><a href="#">CORE TECH</a></li>
</ul>
</li>
<li><a href="#">SHOP</a>
</li>
</ul>
</div>
<!--- 드롭다운 메뉴 --->
답변 2
li와 a를 지정하실때 자기 자손으로만 지정해보세요.
ul.menu > li{}
ul.menu > li > a{}
먼지손님 좀더 자세히... 예제라도 주심이 ^^;;
답변에 예제 드렸는데요;;
ul.menu li {} 이렇게만 되있는 부분을 ul.menu > li {} 이렇게 '>' 추가하시라고 한겁니다.
> 이게 붙으면 직계의 자손에게만 적용됩니다.
지금처럼 ul.menu li 이렇게 되있으면 menu밑에 중첩으로 붙는 ul 아래의 li에도 적용되서요.. 손자 증손자는 적용되지말고 아들에게만 적용되라~라는 셀렉터입니다.
