-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

CSS はホバー時にすぐにメニューを表示します。ゆっくりと表示するために JavaScript に依存したい場合は、ルールdisplay:block;からを削除する必要があります。nav li:hover ul {

于 2013-05-21T01:01:04.497 に答える