가로메뉴 질문에요
본문
가로메뉴를 만들어서 주메뉴 오버시 서브메뉴의 위치를 자유롭게 조정하고 싶습니다.
근데 아무리 넣어도 움직이지를 않네요...혹 잘 아시는분 있음 도움요청하고자 소스 올려봅니다.
<style type="text/css">
#topnavi{position:relative;width:1500px;height:82px;left:0;top:0;z-index:999;} /*전체메뉴의 위치*/
#navi .mainmenu{float:left;margin:0;list-style:none;} /*주메뉴 설정*/
#navi .mainmenu ul{display:none;position:absolute;list-style:none;} /*서브메뉴 설정*/
#navi .mainmenu ul li{float:left;padding:0;}
#navi .mainmenu ul{margin-left:0px;}
img {border:0;list-style:none;}
#topnavi{position:relative;width:1500px;height:82px;left:0;top:0;z-index:999;} /*전체메뉴의 위치*/
#navi .mainmenu{float:left;margin:0;list-style:none;} /*주메뉴 설정*/
#navi .mainmenu ul{display:none;position:absolute;list-style:none;} /*서브메뉴 설정*/
#navi .mainmenu ul li{float:left;padding:0;}
#navi .mainmenu ul{margin-left:0px;}
img {border:0;list-style:none;}
/*서브메뉴의 위치설정과 가로크기*/
#topnavi ul.navi li div.topnavi_s01 {padding-left:50px;width:300px;}
#topnavi ul.navi li div.topnavi_s02 {padding-left:150px;width:600px;}
#topnavi ul.navi li div.topnavi_s03 {padding-left:200px;width:400px;}
#topnavi ul.navi li div.topnavi_s04 {padding-left:250px;width:200px;}
#topnavi ul.navi li div.topnavi_s05 {padding-left:300px;width:200px;}
#topnavi ul.navi li div.topnavi_s06 {padding-left:350px;width:250px;}
</style>
</head>
<body>
<div id="topnavi">
<ul id="navi">
<li class="mainmenu">
<a href="#"><img src="../image/main_02.jpg" alt="로고"/></a>
</li>
<div id="topnavi">
<ul id="navi">
<li class="mainmenu">
<a href="#"><img src="../image/main_02.jpg" alt="로고"/></a>
</li>
<li class="mainmenu">
<a href="#"><img src="../image/main_03.jpg" class="rollover" alt="회사소개"/></a>
<div class="topnavi_s01">
<ul>
<li><a href="#"><img src="../image/sub_company_01.gif" alt="인사말"/></a></li>
<li><a href="#"><img src="../image/sub_company_02.gif" alt="회사연혁"/></a></li>
<li><a href="#"><img src="../image/sub_company_03.gif" alt="피자명의특징"/></a></li>
<li><a href="#"><img src="../image/sub_company_04.gif" alt="찾아오시는길"/></a></li>
</ul>
</div>
</li>
<li class="mainmenu">
<a href="#"><img src="../image/main_04.jpg" class="rollover" alt="메뉴소개"/></a>
<div class="topnavi_s02">
<ul>
<li><a href="#"><img src="../image/sub_menu_01.gif" alt="베이직피자"/></a></li>
<li><a href="#"><img src="../image/sub_menu_02.gif" alt="스페셜피자"/></a></li>
<li><a href="#"><img src="../image/sub_menu_03.gif" alt="제너스피자"/></a></li>
<li><a href="#"><img src="../image/sub_menu_04.gif" alt="로얄피자"/></a></li>
<li><a href="#"><img src="../image/sub_menu_05.gif" alt="럭셔리피자"/></a></li>
<li><a href="#"><img src="../image/sub_menu_06.gif" alt="더블베스트피자"/></a></li>
<li><a href="#"><img src="../image/sub_menu_07.gif" alt="세트메뉴"/></a></li>
</ul>
</div>
<a href="#"><img src="../image/main_03.jpg" class="rollover" alt="회사소개"/></a>
<div class="topnavi_s01">
<ul>
<li><a href="#"><img src="../image/sub_company_01.gif" alt="인사말"/></a></li>
<li><a href="#"><img src="../image/sub_company_02.gif" alt="회사연혁"/></a></li>
<li><a href="#"><img src="../image/sub_company_03.gif" alt="피자명의특징"/></a></li>
<li><a href="#"><img src="../image/sub_company_04.gif" alt="찾아오시는길"/></a></li>
</ul>
</div>
</li>
<li class="mainmenu">
<a href="#"><img src="../image/main_04.jpg" class="rollover" alt="메뉴소개"/></a>
<div class="topnavi_s02">
<ul>
<li><a href="#"><img src="../image/sub_menu_01.gif" alt="베이직피자"/></a></li>
<li><a href="#"><img src="../image/sub_menu_02.gif" alt="스페셜피자"/></a></li>
<li><a href="#"><img src="../image/sub_menu_03.gif" alt="제너스피자"/></a></li>
<li><a href="#"><img src="../image/sub_menu_04.gif" alt="로얄피자"/></a></li>
<li><a href="#"><img src="../image/sub_menu_05.gif" alt="럭셔리피자"/></a></li>
<li><a href="#"><img src="../image/sub_menu_06.gif" alt="더블베스트피자"/></a></li>
<li><a href="#"><img src="../image/sub_menu_07.gif" alt="세트메뉴"/></a></li>
</ul>
</div>
</li>
<li class="mainmenu">
<a href="#"><img src="../image/main_05.jpg" class="rollover" alt="창업안내"/></a>
<div class="topnavi_s03">
<ul>
<li><a href="#"><img src="../image/sub_changup_01.gif" alt="피자명의장점"/></a></li>
<li><a href="#"><img src="../image/sub_changup_02.gif" alt="개설절차"/></a></li>
<li><a href="#"><img src="../image/sub_changup_03.gif" alt="창업비용"/></a></li>
<li><a href="#"><img src="../image/sub_changup_04.gif" alt="창업에대한궁금증"/></a></li>
</ul>
</div>
</li>
<li class="mainmenu">
<a href="#"><img src="../image/main_06.jpg" class="rollover" alt="전국체인현황"/></a>
<div class="topnavi_s04">
<ul>
<li><a href="#"><img src="../image/sub_chain_01.gif" alt="체인점전경"/></a></li>
<li><a href="#"><img src="../image/sub_chain_02.gif" alt="전국체인현황"/></a></li>
</ul>
</div>
</li>
<li class="mainmenu">
<a href="#"><img src="../image/main_07.jpg"class="rollover" alt="고객지원"/></a>
<div class="topnavi_s05">
<ul>
<li><a href="#"><img src="../image/sub_customer_01.gif" alt="매장이벤트"/></a></li>
<li><a href="#"><img src="../image/sub_customer_02.gif" alt="피자명소식"/></a></li>
</ul>
</div>
</li>
<li class="mainmenu">
<a href="#"><img src="../image/main_05.jpg" class="rollover" alt="창업안내"/></a>
<div class="topnavi_s03">
<ul>
<li><a href="#"><img src="../image/sub_changup_01.gif" alt="피자명의장점"/></a></li>
<li><a href="#"><img src="../image/sub_changup_02.gif" alt="개설절차"/></a></li>
<li><a href="#"><img src="../image/sub_changup_03.gif" alt="창업비용"/></a></li>
<li><a href="#"><img src="../image/sub_changup_04.gif" alt="창업에대한궁금증"/></a></li>
</ul>
</div>
</li>
<li class="mainmenu">
<a href="#"><img src="../image/main_06.jpg" class="rollover" alt="전국체인현황"/></a>
<div class="topnavi_s04">
<ul>
<li><a href="#"><img src="../image/sub_chain_01.gif" alt="체인점전경"/></a></li>
<li><a href="#"><img src="../image/sub_chain_02.gif" alt="전국체인현황"/></a></li>
</ul>
</div>
</li>
<li class="mainmenu">
<a href="#"><img src="../image/main_07.jpg"class="rollover" alt="고객지원"/></a>
<div class="topnavi_s05">
<ul>
<li><a href="#"><img src="../image/sub_customer_01.gif" alt="매장이벤트"/></a></li>
<li><a href="#"><img src="../image/sub_customer_02.gif" alt="피자명소식"/></a></li>
</ul>
</div>
</li>
<li class="mainmenu">
<a href="#"><img src="../image/main_08.jpg"class="rollover" alt="커뮤니티"/></a>
<div class="topnavi_s06">
<ul>
<li><a href="#"><img src="../image/sub_community_01.gif" alt="점주코너공지사항"/></a></li>
<li><a href="#"><img src="../image/sub_community_02.gif" alt="점주의견공유마당"/></a></li>
</ul>
</div>
</li>
</ul> <!-- id="navi" -->
</div><!-- id="topnavi" -->
<a href="#"><img src="../image/main_08.jpg"class="rollover" alt="커뮤니티"/></a>
<div class="topnavi_s06">
<ul>
<li><a href="#"><img src="../image/sub_community_01.gif" alt="점주코너공지사항"/></a></li>
<li><a href="#"><img src="../image/sub_community_02.gif" alt="점주의견공유마당"/></a></li>
</ul>
</div>
</li>
</ul> <!-- id="navi" -->
</div><!-- id="topnavi" -->
답변 2
#topnavi ul.navi li div.topnavi_s01 {margin-left:300px;padding-left:50px;width:300px;}
여백을 줘보세요.
많은 도움이 되었습니다. 감사합니다.
답변을 작성하시기 전에 로그인 해주세요.