在進入子菜單的網頁鏈接後，請保持父菜單項突出顯示

我想在我的網站上實現導航菜單。點擊其子菜單項後，我需要突出顯示父列表項。這是工作，如果它是一個單一的文件。我將它包含在所有文件中。我的下面代碼的問題是，當我點擊一個子菜單項時，它的父菜單項會突出顯示直到加載時間。完全加載後，突出顯示的顏色正在消失。點擊沒有孩子的菜單項也沒有突出顯示。任何幫助將得到很大的收穫。謝謝。我的網站鏈接是www.theiab.org/IABPHP。在進入子菜單的網頁鏈接後，請保持父菜單項突出顯示

HTML：

<html> 
    <head> 
    <script> 
     $(document).ready(function() { 
      $('#menu-wplook-main-menu').find('li a').click(function() { 
       //e.preventDefault(); 
       $('#menu-wplook-main-menu').find('li a').removeClass('active'); 
       $(this).addClass('active'); 
       $($(this).closest('li.menu-item').children()[0]).addClass('active'); 
      }); 
     }); 
     </script> 
    <style> 
    #menu-wplook-main-menu li a.active{ 
    color:#e53b51; 
    } 
    </style> 
    </head> 
<body> 
<p class="site-title"><a href="index.php"><img src="images/logo/iab_logo.png" alt="Indian Association for the Blind" title="Indian Association for the Blind"></a></p> 
<nav class="navigation"id="nav"> 
    <ul id="menu-wplook-main-menu" class="parent" > 
     <li class="menu-item"><a href="#"id="menu-item1"><div id="whoWeAre">WHO WE ARE</div></a> 
      <ul class="sub-menu"id="sub-menu1"> 
       <li class="sub-menu-item1"id="sub-menu-item1"><a href="about-founder.php"><div id="subMenuItem1">ABOUT FOUNDER</div></a></li> 
       <li class="sub-menu-item2"id="sub-Menu-Item2"><a href="about-iab-growth.php"><div id="subMenuItem2">ABOUT IAB</div></a></li> 
       <!--<li class="menu-item "><a href="team-iab.php">TEAM IAB</a></li>--> 
      </ul> 
     </li> 
     <li class="menu-item"><a href="#">WHAT WE DO</a> 
      <ul class="sub-menu"id="sub-menu2"> 
       <li class="sub-menu-item3 "><a href="education.php">EDUCATION</a></li> 
       <li class="sub-menu-item4"><a href="career-skills.php">CAREER &amp; SKILL TRAINING</a></li> 
       <li class="sub-menu-item5"><a href="residential-services.php">RESIDENTIAL SERVICES</a></li> 
       <li class="sub-menu-item6"><a href="support-services.php">SUPPORT SERVICES</a></li> 
       <li class="sub-menu-item7"><a href="employment.php">EMPLOYMENT</a></li> 
      </ul> 
     </li> 
     <li class="menu-item"><a href="award_slide.php">AWARDS &amp; RECOGNITION</a></li> 
     <li class="menu-item"><a href="http://theiab.org/awardsandnews/category/newsandevents/">NEWS &amp; EVENTS</a></li> 
     <li class="menu-item"><a href="contact.php">CONTACT</a></li> 
    </ul> 
</nav> 
</body> 
    </html>

CSS：

nav { 
    float:right; 
    padding:38px 0 0; 
} 
nav li { 
    position:relative; 
    display:inline-block; 
} 
nav ul li a { 
    color:#a0a0a0; 
    font-weight:bold; 
} 
nav li a:hover { 
    color:#e53b51; 
    text-decoration: none; 
} 
nav li:hover .sub-menu{ 
    visibility:visible; 
    opacity: 1; 
    transition: all 1s ease; 
} 
ul.sub-menu { 
    visibility:hidden; 
    opacity:0; 
    transition: visibility 1s linear 0.5s,opacity 0.5s linear; 
    position:absolute; 
    top:27px !important;enter code here 
    left:0px; 
    z-index:5000; 
    list-style:none; 
    margin:0; 
    padding: 0 !important; 
    width: auto; 
    min-width:150px; 
    box-shadow:0 0px 8px rgba(0,0,0,0.2); 
    background:#fff; 
} 
ul.sub-menu li { 
    width:100%; 
    float:left; 
    border-bottom: 1px solid #ccc;   
    margin: 0 !important; 
    line-height:100%; 
    padding: 10px 0px !important; 
} 
ul.sub-menu li:last-child { 
    border-bottom: none; 
} 
nav ul.sub-menu li a { 
    padding:0px 12px; 
    height: auto; 
    font-size:13px !important; 
    display: block; 
} 
ul.sub-menu li:hover { 
    border-top:none !important; 
    background: #f9f9f9; 
}

來源

2014-04-01 user3301354

菜單的html是怎麼樣的？ – giorgio

請創建一個小提琴，以便我們可以分析問題 –

您需要更改此：

nav li a:hover { 
    color:#e53b51; 
    text-decoration: none; 
}

要這樣：

nav li:hover a { 
    color:#e53b51; 
    text-decoration: none; 
}

這樣，當您將鼠標懸停在列表項目（li）上時，錨點（a）將被更改。您擁有它的方式，您需要將鼠標懸停在ANCHOR ITSELF上，以便將懸停狀態激活。現在將鼠標懸停在列表項上將激活更改。

來源

2014-04-01 16:35:13 Joshua

在進入子菜單的網頁鏈接後，請保持父菜單項突出顯示

回答

相關問題