메뉴바 hover 질문드립니다.
본문
보시면 그냥 그대루 있습니다.
해결방안점부탁드리겠습니다.
1. css
#tnb {float:left; width:970px; height:40px; background: url(/shop/img/head/top_back1.png); padding-top: 7px;}
#tnb h3 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#tnb ul {zoom:1}
#tnb ul:after {display:block;visibility:hidden;clear:both;content:""}
#tnb li {float:left;padding: 0px 34px;}
#tnb a {height:40px;color:#333;letter-spacing:-0.1em;line-height:2.4em}
#tnb a:focus, #tnb a:hover {}
#tnb li ul li a:hover { font-weight: bold; text-decoration:underline; background-color:#CCC; width:100%; display:block; width:100%;}
#tnb .m1>ul{ width:180px; height: 180px; border-right:1px solid #ebebeb; border-left:1px solid #ebebeb;}
#tnb .m2>ul{ width:157px; height: 80px;margin-top: 15px }
#tnb .m3>ul { width:164px; height: 80px;margin-top: 15px }
#tnb .m4>ul { width:150px; height: 160px;margin-top: 15px }
#tnb .m5>ul { width:157px; height: 215px;margin-top: 15px }
#tnb li:hover ul {;background-color:#e6f0f9; opacity: 150; }
#tnb li:hover a {color:#113C78;}
.menubar li ul {
background:#ffffff ;
display:none; /* 평상시에는 서브메뉴가 안보이게 하기 */
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:20px;
z-index:1;
}
.menubar li:hover ul{
display:block; /* 마우스 커서 올리면 서브메뉴 보이게 하기 */
width: 130px;
margin-left: 120px;
margin-top: -45px;
}
.menubar ul a:hover{
background-color: #1c8adb;
}
2.head.php
<div id="tnb">
<ul class="menubar">
<li class="m1">
<a href="/bbs/content.php?co_id=in_01"><img src="/img/main/menu_1.png"></a>
<ul>
<li><a href="">브랜드 소개</a></li>
<li><a href="">랑벨 히스토리</a></li>
<li><a href="">랑벨의 약속</a></li>
</li>
</ul>
<li><a href="/shop/list.php?ca_id=40"><img src="/img/main/menu_2.png"></li>
<li><a href="/bbs/content.php?co_id=in_03"><img src="/img/main/menu_3.png"></li>
<li><a href="/bbs/board.php?bo_table=EVENT"><img src="/img/main/menu_4.png"></li>
<li><a href="/bbs/board.php?bo_table=notice"><img src="/img/main/menu_5.png"></li>
</ul>
</div>
답변 3
이거 간단히 되는문제일거라 보는데요
안되는 기능이 아니고 뒤에 가려져서 보이는거고만요
메뉴가 나와야 하는부분을
z-index 를 가리는 이미지 보다 높게 설정하시면 돼요
<ul class="menubar">
<li class="m1">
<a href="/bbs/content.php?co_id=in_01"><img src="/img/main/menu_1.png"></a>
<ul style='z-index:100;'> <!-- 이렇게 하면 될듯하네요 -->
<li><a href="">브랜드 소개</a></li>
<li><a href="">랑벨 히스토리</a></li>
<li><a href="">랑벨의 약속</a></li>
</li>
</ul>
하 감사합니다.. 이걸모르고있었네여.. z-index ㅋ 감사합니다.
죄송한대 되긴하는데. 밑에 커서를못잡아여..
아 무슨말씀인지 알겠네요.
메뉴에서 마우스 벗어나면 안된다는말씀이신거같은데
메뉴 링크를 위세 두번째 메뉴가 나타나는 부분보다 길게 잡으면 돼요
말이 어렵긴한데.. 천번째 메뉴에서 링크 영역이 어느정도 있을거라 생각돼요
그 영역위로 두번째 메뉴가 나온다면
마우스 롤아웃을 해도 메뉴가 사라지지 않거든요.
보니까 이미지인거 같은데
이미지를 길게 짜르시면 될거같은데..
도움이 돼셧으면 채택부탁드려요~^^
커서를 못잡는다는 말이 어떤의미인지.. 잘모르겟네요 ㅠ
