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>
<!--- 드롭다운 메뉴 --->