jQuery 下拉导航菜单

标签 jquery css menu navigation drop-down-menu

下拉导航菜单有一个小问题。

将鼠标悬停在带有子菜单的元素上时,悬停状态会激活并且子菜单会正确下拉。但是一旦您将鼠标移入子菜单,原始菜单项就会从其悬停背景颜色恢复为原始状态。

有没有办法在进入子菜单时保持背景悬停状态相同?更复杂的是,每个带有子菜单的菜单项也是不同的颜色。

HTML:

<nav id="topNav"> 
        <ul>
            <li><a href="#" title="About">About</a></li>
            <li id="learn"><a href="#" title="Learn">Learn</a>
                <ul>
                    <li><a href="#" title="News">News</a></li>
                    <li><a href="#" title="Research">Research</a></li>
                    <li><a href="#" title="Simulcasts">Simulcasts</a></li>
                    <li><a href="#" title="Fellowships">Fellowships</a></li>
                    <li><a href="#" title="Internships">Internships</a></li>
                </ul>
            </li>
            <li id="connect"><a href="#" title="Connect">Connect</a>
                <ul>
                    <li><a href="#" title="News">News</a></li>
                    <li><a href="#" title="Research">Research</a></li>
                    <li><a href="#" title="Simulcasts">Simulcasts</a></li>
                    <li><a href="#" title="Fellowships">Fellowships</a></li>
                    <li><a href="#" title="Internships">Internships</a></li>
                </ul>
            </li>
            <li id="invest"><a href="#" title="Invest">Invest</a>
                <ul>
                    <li><a href="#" title="News">News</a></li>
                    <li><a href="#" title="Research">Research</a></li>
                    <li><a href="#" title="Simulcasts">Simulcasts</a></li>
                    <li><a href="#" title="Fellowships">Fellowships</a></li>
                    <li><a href="#" title="Internships">Internships</a></li>
                </ul>
            </li>
        </ul>
    </nav>

JS:

(function($){

$(document).ready(function() {
    //cache nav
    var nav = $("#topNav");

    //add hover animations to submenu parents
    nav.find("li").each(function() {
        if ($(this).find("ul").length > 0) {

            //show subnav on hover
            $(this).mouseenter(function() {
                $(this).find("ul").stop(true, true).slideDown(200);             
            });

            //hide submenus on exit
            $(this).mouseleave(function() {
                $(this).find("ul").stop(true, true).slideUp(50);
            });
        }
    });
});

CSS:

nav { display:block; position:relative; z-index: 600; 
nav ul { padding:0; margin:0; }  
nav li { position:relative; float:left; list-style-type:none; }  
nav ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }  
nav li a { display:block; width: 68px; padding: 18px 35px 53px 9px; color:#fff; border-right: 1px solid #D0D2D3; text-decoration:none; }  
nav li a:focus { outline:none; text-decoration:underline; }  
nav a span { display:block; float:rightright; }  
nav a:hover { background-color: #e5e6e7; color: #4D4D4D; }
nav ul ul { display:none; position:absolute; left:0; }  
nav ul ul li { float:none; }  
nav ul ul a { width: 199px; padding:13px; border-right:none; border-bottom: 1px solid #fff; }  
nav ul li:nth-child(2) { background-image: url('../images/nav-turquoise.png'); background-repeat: no-repeat; background-position: top right; } 
nav ul li:nth-child(3) { background-image: url('../images/nav-purple.png'); background-repeat: no-repeat; background-position: top right; }
nav ul li:nth-child(4) { background-image: url('../images/nav-orange.png'); background-repeat: no-repeat; background-position: top right; }
nav ul li:nth-child(2) a:hover { background-color: #14C7C4; color: #4D4D4D; background-image: url('../images/nav-grey.png'); background-repeat: no-repeat; background-position: top right; }
nav ul li:nth-child(3) a:hover { background-color: #A36CC8; color: #4D4D4D; background-image: url('../images/nav-grey.png'); background-repeat: no-repeat; background-position: top right; }
nav ul li:nth-child(4) a:hover { background-color: #FBB600; color: #4D4D4D; background-image: url('../images/nav-grey.png'); background-repeat: no-repeat; background-position: top right; }
#learn ul li { background-color: #14C7C4; background-image: none; }
#connect ul li { background-color: #A36CC8; background-image: none; }
#invest ul li { background-color: #FBB600; background-image: none; }
#learn ul li a:hover { background-color: #27a3a4; color: #fff; background-image: none; }
#connect ul li a:hover { background-color: #865e97; color: #fff; background-image: none; }
#invest ul li a:hover { background-color: #d39b13; color: #fff; background-image: none; }

最佳答案

我将我的 :hover 样式应用于 li 而不是 a。从技术上讲,由于您的菜单是嵌套的列表项,将鼠标悬停在子菜单项上时,您仍将鼠标悬停在父级 li 上,因此样式会保持不变。

希望对你有帮助

关于jQuery 下拉导航菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8467834/

相关文章:

javascript - 闪烁文本这么多秒 - 然后消失

html - flex 盒订单 : I want box to open under a element which is not a sibling

javascript - 如何区分拖动开始和选择开始 HTML5-Canvas

html - AngularJS 滚动问题

android - 动态更改弹出菜单项的字体大小 Android

c++ - 查看我的 C++ 滚动菜单并提供任何提示

php - 没有日期的 jQuery 计时器

javascript - 如何触发模态的点击功能

javascript - 使用 Javascript API 登录谷歌而不触发弹出窗口

c - c中的返回函数主菜单