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">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>

                                <!--- 드롭다운 메뉴 --->​