Question

我想在我的网站上实现导航菜单。我需要在单击其子菜单项后突出显示父列表项。这是工作，如果它是一个文件。我把它包含在所有文件中。下面代码的问题是，当我点击子菜单项时，其父菜单项会突出显示直到加载时间。完全加载后，突出显示的颜色正在消失。单击没有子项的菜单项也不会突出显示。任何帮助都会受到极大的欢迎。谢谢。我的网站链接是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;
}

Answer 1

你需要改变这个：

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

对此：

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

当你将鼠标悬停在list-item（li）上时，锚点（a）将被更改。你拥有它的方式，你需要将鼠标悬停在ANCHOR ITSELF上以激活悬停状态。现在将鼠标悬停在列表项上将激活更改。

进入子菜单Web链接后，保持父菜单项突出显示

1 个答案: