-1

我正在尝试在我的菜单上进行下拉,以便在“联系我们”顶级菜单项上缓慢下降。悬停工作正常,使用 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;
}
4

2 回答 2

0

看看这个:http ://www.w3schools.com/jquery/eff_slideup.asp

函数 slideUp() 和 slideDown() 以毫秒为单位的速度需要时间。

于 2013-05-21T01:30:22.117 回答
0

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

于 2013-05-21T01:01:04.497 回答