그누보드 QA - 상위메뉴 hover 유지

상위메뉴 hover 유지

고끼리아저씨 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2020.01.21 18:40:15 조회 8199 (211.♡.♡.180)

본문

안녕하세요 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를 유지하는 방법을 알려주시면 감사하겠습니다...