메뉴바 hover 질문드립니다.

메뉴바 hover 질문드립니다.

QA

메뉴바 hover 질문드립니다.

본문

http://road-beauty.com/shop/ 

보시면 그냥 그대루 있습니다.

 

해결방안점부탁드리겠습니다.

 

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>

아 무슨말씀인지 알겠네요.

 

메뉴에서 마우스 벗어나면 안된다는말씀이신거같은데

 

메뉴 링크를 위세 두번째 메뉴가 나타나는 부분보다 길게 잡으면 돼요

 

말이 어렵긴한데.. 천번째 메뉴에서 링크 영역이 어느정도 있을거라 생각돼요 

 

그 영역위로 두번째 메뉴가 나온다면

 

마우스 롤아웃을 해도 메뉴가 사라지지 않거든요.

 

보니까 이미지인거 같은데

 

이미지를 길게 짜르시면 될거같은데..

 

도움이 돼셧으면 채택부탁드려요~^^

답변을 작성하시기 전에 로그인 해주세요.
전체 103
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT