Question

我使用了其中一个CSS模板，其中的菜单没有下拉菜单，所以我添加了下拉菜单。现在的问题是，当我将鼠标放在其中一个带有下拉菜单（子菜单）的选项卡/选项上时，我无法从此下拉菜单中选择任何内容，因为它很快就消失了，我不知道为什么会发生这种情况

此菜单的HTML代码：

<div class="topnav">
                <ul class="menu" runat="server" >
                    <li><a href="Default.aspx">Home</a></li>
                    <li><a href="Services.aspx">Services</a>
                        <ul>
                            <li><a href="#">Service #1</a></li>
                            <li><a href="#">Service #2</a></li>
                            <li><a href="#">Service #3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Items</a>
                        <ul>        
                            <li><a href="#">Item #1</a></li>
                            <li><a href="#">Item #2</a></li>
                            <li><a href="#">Item #3</a></li>
                            <li><a href="#" target="_blank">Item #4</a></li>
                            <li><a href="#" target="_blank"">Item #5</a></li>
                            <li><a href="#" target="_blank">Item #6</a></li>
                            <li><a href="#">Item #1</a></li>
                        </ul>
                    </li>

                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Help</a></li>

                </ul>
                <div class="clr"></div>
              </div>

此菜单的css代码为：

@charset "utf-8";
/* CSS Document */


ul.menu li ul { font-family:"Liberation sans", Arial, Helvetica, sans-serif;}


/* DESIGN TOPNAV (mainmenu) */
.topnav { padding:0; margin:0; width:966px; height:53px; background: url(images/bg_menu.gif) top repeat-x; }


/* level 0 */
.topnav ul { padding:0; margin:0 30px 0 0; list-style:none; border:0; float: left; }
.topnav ul li { float:left; margin:0; padding:0; border-right:1px solid #303030; border-left:1px solid #0a0a0a; }
.topnav ul li a { float:left; margin:0 1px 0 0; padding:17px 30px; color:#fff; font:normal 14px Georgia, "Times New Roman", Times, serif; text-decoration:none; }
.topnav ul li.current_page_item { }                 /* active item first level */
.topnav ul li.current_page_item a,
.topnav ul li a.a_hover_main { color:#fff; background-color:#0f0f0f;}                       /* on hover */


/* level 1 */
.topnav ul li ul { padding:0; top:52px; left:-2px; height:auto; color:#a8a7a7; background-color:#0f0f0f; border-bottom:none;}           /* position of submenu */
.topnav ul li ul li { margin:0; padding:0; background:none; border-bottom:1px solid #010101;}

/* for the next line: (.topnav ul li ul li a)
 * I changed:  
 * padding: 10px 24px and width: 49px
 * and I added: margin:0 1px 0 0
 */
.topnav ul li ul li a { float:left; margin:0 1px 0 0; padding:17px 47px; width:54px; font:normal 12px Georgia, "Times New Roman", Times, serif; color:#7f7f7f;}
.topnav ul li ul li a.have_submenu { }                                                              /* if item have submenu */
.topnav ul li ul li a:hover,
.topnav ul li ul li a.have_submenu_hover { color:#fff; background:none;}
.topnav ul li ul li ul { padding:0; top:-1px; left:170px;}  /* position of submenu level 2 */

.topnav * { z-index:1001;}

/* DO NOT EDIT!!! */
ul.menu { list-style:none;}
ul.menu li { cursor:pointer; position:relative;}
ul.menu li a { position:relative;}
ul.menu li ul { display:none; position:absolute; list-style:none;}
ul.menu li ul li ul { position:absolute; list-style:none;}

JQuery代码：

jQuery(document).ready(function($){

    // menu smothness
    $('.menu li').click(function() {
      window.location = $(this).find('a:first').attr('href');
    });
    var dropdown_level = 0;
    $('.menu li ul').parent().find('a:first').addClass('have_submenu');
    $('.menu').children('li').children('a').addClass('top_level');
    $('.menu').children('li').children('a').removeClass('have_submenu');
    $('.menu li').hover(function(){
      if(dropdown_level == 0){
        $('.menu').find('a').removeClass('have_submenu_hover');
        $(this).addClass('li_hover_main');
        $(this).children('a').addClass('a_hover_main');
        $('.menu ul').parent().find('a:first').addClass('have_submenu');
        $('.menu').children('li').children('a').addClass('top_level');
        $('.menu').children('li').children('a').removeClass('have_submenu');
      }
      $(this).find('ul:first').stop(true,true).slideDown(200).show();
      $(this).find('a:first').addClass('have_submenu_hover');
      $('.menu').children('li').children('a').removeClass('have_submenu_hover');
      dropdown_level++;
    },function(){
      $(this).find('ul:first').stop(true,true).slideUp(0);
      $(this).find('a:first').removeClass('have_submenu_hover');
      dropdown_level--;
      if(dropdown_level == 0){
        $(this).removeClass('li_hover_main');
        $(this).children('a').removeClass('a_hover_main');
       }
    });
    // END of menu smothness

});

以下是我拥有的菜单栏的快照： enter image description here

Answer 1

我使用了hoverIntent脚本来修复此效果。你真的离开了一个锚点，所以当你鼠标移出时，悬停就消失了。解决此问题的一种方法是延迟悬停效果，使其保持足够长的时间以便用户将鼠标悬停。

http://cherne.net/brian/resources/jquery.hoverIntent.html

然后像

    $('.main-nav > ul > li').hoverIntent({
        timeout: 300,
        over: function () {
            $(this).addClass('hover')
        },
        timeout: 300,
        out: function () {
            $(this).removeClass('hover')
        }
    });

如何修复此菜单栏以显示下拉子菜单？

1 个答案: