상위메뉴 hover 유지

상위메뉴 hover 유지

QA

상위메뉴 hover 유지

본문

안녕하세요 css를 이용해서 마우스 hover시 사선으로 눕는 메뉴를 만들고있는데

메인메뉴에서 서브메뉴로 마우스가 넘어가면 hover가 되지않아서 문제네요..


<style>
#lnb{width:100%; clear:both ;height:100px; /*background-color:rgba(34,34,34,0.3)*/; background-color:#fff; border-bottom:1px solid #ebe9e7}
#lnb_wrap{width:1200px; height:100px; margin:0 auto;  }
#lnb_list{float:right; height:100px; z-index:9999; }
#lnb_list >ul >li{position:relative; float:left; height:100px; line-height:100px; padding:0px 46px 0 0 ; color:#191919; font-size:22px; font-weight:600  }
#lnb_list li:last-child {padding-right:10px !important}
#lnb_list li a:link, #lnb_list li a:visited{text-decoration:none; color:#191919;}
#lnb_list ul li:hover ul { display:block;}
#lnb_list ul li:hover a:hover{    
    color:#fff;
    display: block;
    padding: 0px 20px; 
    text-transform: uppercase;
    font-weight: bold;
    transform: skew(-20deg);
    text-decoration: none;
    background: #0166cc;
     }
div#lnb_list:hover + div#lnb_list_bg { display:block !important; }
#lnb_list ul:hover ul li a:hover{ color:#fff000; font-weight:bold; transform: skew(0deg); padding:0;}
#lnb_list ul ul{ display:none; position:absolute; top:100px; height:40px;  z-index:1000 }
#lnb_list li li{ display:inline; float:left; height:40px; line-height:40px; margin:0; text-indent:5px; font-size:15px ; color:#fff !important; padding:0 30px 0 0; font-weight:normal }
#lnb_list li li a { display:inline; width:100%; color:#fff;  }
#lnb_list li li a:link, #lnb_list li li a:visited{text-decoration:none; color:#fff;}
#lnb_list li:nth-child(1) ul{width:500px !important; }
#lnb_list li:nth-child(2) ul{width:500px !important; }
#lnb_list li:nth-child(3) ul{width:300px !important; }
#lnb_list li:nth-child(4) ul{width:300px !important;  }
#lnb_list li:nth-child(5) ul{width:300px !important;  }
#lnb_list_bg{ display:none; position: absolute; top:100px; left:0;width:100%; height:40px; background-color:#0166cc ; z-index:990}

#logo{float:left; width:184px; height:37px; line-height:100px; padding:0px 0 0 25px ; clear:both}
</style>
    <!-- header -->
       
    <div id="lnb">
    <!-- lnb_wrap -->
    <div id="lnb_wrap">
   
    <!-- lnb_list -->
    <div id="lnb_list"> 
    <ul>
    <li><a href="<?php echo G5_BBS_URL ?>/content.php?co_id=c111">메인1</a>
        <ul>
        <li><a href="<?php echo G5_BBS_URL ?>/content.php?co_id=c111">서브1</a></li>
        <li><a href="<?php echo G5_BBS_URL ?>/content.php?co_id=c121">서브2</a></li>
        <li><a href="/c131.php">서브3</a></li>                        
        </ul>
    </li>      
    <li><a href="/c211.php">메인2</a>
        <ul>
        <li><a href="/c211.php">서브1</a></li>
        <li><a href="/c221.php">서브2</a></li>

        </ul>        
    </li>   
   
    </ul>
    </div> 
    <!-- //lnb_list -->
    <div id="lnb_list_bg"></div>   
    </div>
    <!-- //lnb_wrap -->
    </div> 
<!-- //header -->
 
 

 

현재 만들고있는 페이지인데 서브메뉴로 마우스 이동시 메인쪽에 hover를 유지하는 방법을 알려주시면 감사하겠습니다...

이 질문에 댓글 쓰기 :

답변 2

이소스 참고해보세요. 
https://codepen.io/butoki/pen/MYBxWV

이건 사이트를 봐야 그나마 더 쉽게 답변이 가능할 것 같습니다. 사이트 주소를 올려주실 수 있으신가요?

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

회원로그인

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