0

请帮忙，需要在 CSS 菜单鼠标移出时添加延迟。尝试了不同的方法，但没有成功。是否可以在现有菜单中添加一些 javascript 代码？

请查看 jsFiddle 示例：http: //jsfiddle.net/mZLFz/

<div id="nav">
<ul>
    <li class="abt"><a href="#" title="">About Us</a>
        <ul>
            <li><a href="#">Our style</a></li>
            <li><a href="#">Our mission</a></li>
        </ul>
    </li>
    <li class="col"><a href="#">Collection</a>
        <ul>
            <li class="col-a"><a href="#">2013</a>
                <ul>
                    <li><a href="#">A</a></li>
                    <li><a href="#">B</a></li>
                </ul>
            </li>
            <li class="col-b"><a href="#">2014</a>
                <ul>
                    <li><a href="#">A</a></li>
                </ul>   
            </li>
        </ul>
    </li>
    <li class="buy"><a href="#">Good to know</a>
        <ul>
            <li class="buy-a"><a href="#">Men</a>
                <ul>
                    <li><a href="#">A</a></li>
                    <li><a href="#">B</a></li>
                    <li><a href="#">C</a></li>
                </ul>
            </li>
            <li class="buy-b"><a href="#">Women</a>
                <ul>
                    <li><a href="#">A</a></li>
                </ul>
            </li>
                <li class="buy-c"><a href="#">Kids</a>
                <ul>
                    <li><a href="#">A</a></li>
                </ul>                   
            </li>
        </ul>           
    </li>


#nav{
height:40px;
overflow:hidden;
list-style:none;
}
        #nav ul {list-style:none;}
        #nav ul li {text-decoration: none;float:left;}
        #nav ul li a {
        text-transform:uppercase;
        font-size:14px;
        color:#bcbec0;
        text-decoration: none;
        padding:0 20px 3px 20px;
        }
        #nav ul li:hover > a{border-bottom: 2px solid #afb0bd;color:#383a49;}
/* 1 LEVEL DROP-DOWN MENU */
#nav ul li.abt ul {margin-left:-30px;}              
#nav ul li.col ul {margin-left:-100px;}
#nav ul li.buy ul { margin-left: -213px;}
#nav ul li.buy ul li {margin-left: 30px;}
#nav ul li ul { display:none;}
#nav ul li:hover > ul {width:100%;display:block; position:absolute; top:48px;background:#e7e8e9;}
#nav ul li:hover > ul li{ float:left;padding:10px 0 5px 0;list-style:none;}
#nav ul li:hover > ul li a {}
#nav ul li:hover > ul li a:hover {}

/* 2 LEVEL DROP-DOWN MENU */
#nav ul li ul li.col-a ul { margin-left:-50px;top:35px;}
#nav ul li ul li.col-b ul { margin-left:-100px;top:35px;}
#nav ul li ul li.buy-a ul { margin-left:-30px;top:35px;}
#nav ul li ul li.buy-b ul { margin-left:-160px;top:35px;}
#nav ul li ul li.buy-c ul { margin-left:-30px;top:35px;}
#nav ul li > ul li ul { display:none; }
#nav ul li > ul li:hover > ul {width:980px; display:block; position:absolute;background:#f1f1f2;}
#nav ul li > ul li:hover ul li {float:left;padding-top:10px; list-style:none;  }
#nav ul li > ul li:hover ul li a {}
#nav ul li > ul li:hover ul li a:hover { }
4

1 回答 1

1

You can change some :hover to .hover and add some jQuery like this?

    $('li').hover(
        function(){
             var x = this; 
             setTimeout(
                 function(){
                      $(x).addClass('hover')
                 }, 800
             )
        },
        function(){
              $(this).removeClass('hover')
        }
    )
于 2013-05-22T16:45:18.297 回答