2013-05-17 4 views
1

im이 jQuery 다중 레벨 CSS 메뉴를 사용하고 마우스를 올리면 각 subnav가 hovered/clicked 목록 항목 바로 아래에 나타납니다.
내가 겪고있는 문제는 선택한 상위 항목의 bg 색상이 서브 네트워크 목록 위로 마우스를 올려 놓을 때 온 - 호버 색상을 유지하지 않는 것입니다.
어떤 도움을 주겠습니까, 몇 시간 동안이 문제로 어려움을 겪어 왔습니다. 간단히 추가jQuery 다중 레벨 CSS 메뉴 on-hoover가 작동하지 않습니다.

.jquerycssmenu{ 
      font-family: 'OxygenBold', arial; 
      color: #3a4769; 
      text-transform: uppercase; 
      line-height: 47px; 
      font-size: 18px; 
      padding-left: 80px; /*offset of tabs relative to browser left edge*/ 
      background-image: url(images/nav-repeat.png); 
      background-repeat: repeat-x; 
      -webkit-border-top-left-radius: 10px; 
      -webkit-border-top-right-radius: 10px; 
      -moz-border-radius-topleft: 10px; 
      -moz-border-radius-topright: 10px; 
      border-top-left-radius: 10px; 
      border-top-right-radius: 10px; 
      } 

      .jquerycssmenu ul{ 
      margin: 0; 
      padding: 0; 
      list-style-type: none; 
      } 

      /*Top level list items*/ 
      .jquerycssmenu ul li{ 
      position: relative; 
      display: inline; 
      float: left; 
      } 

      /*Top level menu link items style*/ 
      .jquerycssmenu ul li a{ 
      display: block; 
      padding: 5px 17px 4px 20px; 
      margin-right: 0; /*spacing between tabs*/ 
      border-bottom-width: 0; 
      color: #2d2b2b; 
      text-decoration: none; 
      } 

      .jquerycssmenu ul li a:hover { 
      background-color: #fcae18; /*tab link background during hover state*/ 
      color: #fff; 
      } 

      /*1st sub level menu*/ 
      .jquerycssmenu ul li ul{ 
      position: absolute; 
      text-transform: capitalize; 
      left: 0; 
      display: block; 
      visibility: hidden; 
      border-top: 1px solid #ff9d14; 
      } 

      /*Sub level menu list items (undo style from Top level List Items)*/ 
      .jquerycssmenu ul li ul li{ 
      display: list-item; 
      float: none; 
      } 

      /*All subsequent sub menu levels vertical offset after 1st level sub menu */ 
      .jquerycssmenu ul li ul li ul{ 
      top: 0; 
      } 

      /* Sub level menu links style */ 
      .jquerycssmenu ul li ul li a{ 
      font-family: 'OxygenRegular', arial; 
      font-size: 15px; 
      width: 160px; /*width of sub menus*/ 
      background: #fcae18; 
      color: #fff; 
      padding: 0 20px; 
      margin: 0; 
      border-top-width: 0; 
      border-bottom: 1px solid #ff9d14; 
      } 

      .jquerycssmenu ul li ul li a:hover{ /*sub menus hover style*/ 
      background: #ff9d14; 
      color: #fff; 
      } 

      /* ######### CSS classes applied to down and right arrow images ######### */ 

      .downarrowclass{ 
      position: absolute; 
      top: 20px; 
      right: 5px; 
      } 

      .rightarrowclass{ 
      position: absolute; 
      top: 5px; 
      right: 5px; 
      } 

답변

1

에 : 여기

<div id="topnav" class="jquerycssmenu"> 
     <ul> 
      <li><a href="#">Park Info</a> 
     <ul> 
      <li><a href="#">About SVB</a></li> 
      <li><a href="#">Calendar</a></li> 
      <li><a href="#">Location</a></li> 
      <li><a href="#">Media Recognitions</a></li> 
      <li><a href="#">Trip Tips</a></li> 
      <li><a href="#">FAQ's</a></li> 
      <li><a href="#">Policies</a></li> 
     </ul> 
     </li> 
      <li><a href="#">Rides & Attractions</a> 
     <ul> 
      <li><a href="#">Our Slides</a></li> 
      <li><a href="#">Our Kids Area</a></li> 
      <li><a href="#">Picnic Areas</a></li> 
     </ul> 
     </li> 
      <li><a href="#">Groups</a> 
     <ul> 
      <li><a href="#">Group Rates</a></li> 
      <li><a href="#">Book Group</a></li> 
     </ul> 
     </li> 
     </ul> 
     <br style="clear: left" /> 
    </div> <!-- /topnav -->  

는 CSS입니다 :

여기 http://jsfiddle.net/UqKyh/

에 대한 데모는 HTML입니다 이 CSS에서

.jquerycssmenu ul li:hover{ 
    background:#fcae18; 
} 
+0

하하 좋은 생각, 고마워 그렉! – rid

+0

원본에서 편집을했는데 위의 해결책을 사용하면 추가 클래스를 추가하지 않아도됩니다. –

-1

당신이해야 Z 인덱스를 설정 1.

+2

정교하게 만드실 수 있습니까? – rid

관련 문제