Question

我正试图在我的菜单上放下一个下拉缓慢放在“联系我们”顶级菜单项上。悬停工作正常，用CSS完成，但我似乎无法让它移动得更慢。

这是我的代码，下半部分：

 <script>
            $(document).ready(function(){
                var full_path = location.href.split("#")[0];
                $("#topnav a").each(function(){
                var $this = $(this);
                if($this.prop("href").split("#")[0] == full_path) {
                $this.addClass("active");
                            }
                        });

            $("nav ul li").hover(function(){
                if ($("> ul", this).length > 500) {
                    $("> ul", this).show();
                }
                    }, function(){
                        if ($("> ul", this).length > 500) {
                            $("> ul", this).hide();
                        }
                    });
                });
            </script>

HTML：

<nav id="topNav">
            <div class="container_12">
                <ul class="grid_12">
                    <li class="about-navitem"><a href="about-us.html">about us</a></li>
                    <li class="espace-navitem"><a href="espaceauto.html">espaceauto</a></li>
                    <li class="requestdemo-navitem"><a href="request-a-quote.html">request a quote</a></li>
                    <li class="newsroom-navitem"><a href="newsroom.html">newsroom</a></li>
                    <li class="contact-navitem"><a href="#">contact us</a>
                        <ul>
                            <li><strong><span class="red">Contact us today to request a demo!</span></strong><br />
                            We'll show you how to<br />
                            reach millions in just minutes<br /><br />
                            1000 de La Gauchetiere Street West<br />
                            24th Floor<br />
                            Montreal Canada<br />
                            H3B 4W5<br /><br />
                            (toll-free) 1-855-568-2835<br />(tel) 1-514-448-7457<br />
                            <a href="mailto:info@autopremier.com">info@autopremier.com</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!--end nav container_12-->      
        </nav>

仅用于子导航的CSS

nav li > ul {
display:none;
}
nav li:hover ul {
position:relative;
z-index: 10;
background-image: none;
display:block;
position: absolute;
padding-left: 20px;
padding-top:20px;       
height: 325px;  
top:47px;
left:-132px;
width: 300px;
background-color: #f2f2f2;
border: 1px solid #ededed;
-webkit-box-shadow: 5px 5px rgba(210, 210, 210, 1);
   -moz-box-shadow: 5px 5px rgba(210, 210, 210, 1);
     -o-box-shadow: 5px 5px rgba(210, 210, 210, 1);
    -ms-box-shadow: 5px 5px rgba(210, 210, 210, 1);
        box-shadow: 5px 5px rgba(210, 210, 210, 1);
        behavior: url(../PIE/PIE.htc);
}
nav li:hover li {
background-image: none;
margin:0;
}
nav li:hover li a {
color:#e33232;
font: normal 14px/21px arial, sans-serif;
text-align:left;
padding-top:0px;
text-transform:none;
}
nav li:hover li a:hover {
background: none;
text-decoration:underline;
}

Answer 1

您的CSS会在悬停时立即显示菜单。如果您想依靠javascript慢慢显示，则需要从display:block;规则中移除nav li:hover ul {

Answer 2

检查出来：http://www.w3schools.com/jquery/eff_slideup.asp

函数slideUp（）和slideDown（）以ms为单位获取速度。

无法获取菜单下拉工作

2 个答案: