묻고답하기
1차메뉴의 가로정렬과 마우스 오버시 2차메뉴관련 문의
2008.06.03 15:39
안녕하세요 제로보드XE로 이쁜 커뮤니티를 만들어 볼려고 노력하는 사람입니다.
다름이 아니고
제가 메뉴 부분을 구성하려고 하는데
1차메뉴를 가로로 구성하고
1차메뉴를 마우스오버시
2차메뉴가 가로로 구성되는 간단한 상단메뉴를 생각하고있습니다.
그런데 질문과 답변을 찾아보니..
1차메뉴 를 마우시 오버시
2차메뉴가 나오는 답변이 있어서
따라해 보니
1차메뉴는 새로정렬이 되서 나오고
ul 과 li 태그로 인해서 검은점이 앞에 찍힙니다.
제 홈페이지 http://www.zeissuser.com 에서
문제를 확인 가능합니다.
저는 단지 그냥 1차메뉴를 가로로 출력하고
그 메뉴를 마우스 오버시
2차메뉴가 가로로 출력되게 하고 싶은데
현제 2차메뉴는 마우스 오버시 가로로 잘 출력되고 있습니다.
제가 만들고 있는 스킨의 layout 파일과 css 파일을 올려봅니다.
해결해주셔면 정말 감사할것같습니다.
아래와같이 적용해 보세요.. 적용된 레이아웃 이미지 입니다.
wjrlayout.html----------->>>
<ul id="gnb">
<!-- main_menu 1차 시작 -->
{@ $idx = 1 }
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
<!--@if($val['selected'])-->
{@ $menu_1st = $val }
<!--@end-->
<li onMouseOver="menu({$idx});" <!--@if($val['selected'])-->class="on"<!--@end-->><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['text']}</a></li>
<!--@end-->
{@$idx++}
<!--@end-->
<!-- main_menu 1차 끝 -->
</ul>
<script language="javascript1.2">
var menuLen={$idx-1};
</script>
<!--히든 레이어 메뉴-->
<!-- main_menu 1차 시작 -->
{@ $idx = 1 }
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
<!--2차메뉴-->
<div class="subMenu" id="subMenu_{$idx}" style="<!--@if($val['selected'])-->display:block;<!--@else-->display:none;<!--@end-->">
<!--@foreach($val['list'] as $key1 => $val1)--><!--@if($val1['text'])-->
<!--@if($val1['selected'])--><!--@end-->
<a id="lnb1" href="{$val1['href']}" <!--@if($val1['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val1['text'+ ']}</a>
<!--@end-->
<!--@end-->
</div>
<!--@end-->
{@$idx++}
<!--@end-->
<!-- main_menu 1차 끝 -->
적용할 스타일.css --------->>>>
#gnb { position:absolute; left: 0px; top:82px; overflow:hidden; white-space:nowrap; }
#gnb li { float:left; list-style:none; position:relative; white-space:nowrap;}
#gnb li a { display:block; float:left; padding:15px 0px 0px 0px; background:url(../images/default/bgGnbOff.gif) no-repeat center top; width:75px; height:20px; color:#ffffff; white-space:nowrap; text-align:center; font-weight:bold; text-decoration:none; }
#gnb li a:hover,
#gnb li a:focus { color:#ffffcc; background:url(../images/default/bgGnbOn.gif) no-repeat center top; }
#gnb li.on a { font-weight:bold; color:#ffffcc; background:url(../images/default/bgGnbOn.gif) no-repeat center top;}
.subMenu{position:absolute; left:70px; top:120px; background-color:#FFFFFF;width:920px;height:24px;}
#lnb1{text-decoration:none;color:#000000;padding-left:10px; line-height:2em; position:relative;white-space:nowrap; }
#lnb1:hover,focus {color:#000000}
.gnb_sub { position:absolute; top:120px; left:20px; height:24px; overflow:hidden; white-space:nowrap; }
.gnb_sub li { float:right; list-style:none; background:url(../images/default/sub_part.gif) no-repeat left center; padding-left:2px; position:relative; left:10px; white-space:nowrap;}
.gnb_sub li a { display:block; float:center; padding:6px 2px 0 2px; height:18px; color:#727272; font-weight:bold; white-space:nowrap; text-decoration:none; font-family:"돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif;}
.gnb_sub li a:hover,
.gnb_sub li a:focus { color:yellow; }
.gnb_sub li.on a, .gnbin li.on a:hover { font-weight:bold; color:red; background:url(../images/default/arrow_3.gif) no-repeat center bottom; }