Question

我正在为我正在进行的项目构建一个下拉菜单，但我并没有完全按照应有的方式工作。我希望它在我悬停根级菜单时显示子菜单，然后在短暂延迟后再次关闭，此时菜单或子菜单不再悬停。大多数都有效;当根级别项目悬停时显示子菜单，当我停止盘旋根级别项目时隐藏子菜单。问题是当我将光标从根级项目移动到子菜单项而不是第一个并将其悬停时，子菜单也会隐藏。这显然不是很好，所以请帮助。

我created a JSFiddle的代码可以更清楚地显示问题。

所以，这是我的代码：

menu.htm

<div id=m_wrapper>
    <ul id=menu>
        <li onMouseOver="show_sub_menu('0')" onMouseOut="start_timer()">Item 1
            <div id=s0 onMouseOver="show_sub_menu('0')" onMouseOut="start_timer()">
                <a href=#>Item 1.1</a>
                <a href=#>Item 1.2</a>
                <a href=#>Item 1.3</a>
            </div>
        </li>
    </ul>
</div>

menu.css

#m_wrapper {
    position:relative;
    display:table;
}
#menu {
    position:relative;
}
#menu li {
    width:100px;
    position:relative;
    float:left;
    list-style-type:none;
}
#menu div {
    position:absolute;
    visibility:hidden;
    display:inherit;
    width:100%;
    z-index:30
}
#menu div a {
    position:relative;
    display:block;
    z-index:35;
}

menu.js

var countdown = 300;
var timer = null;
var menu_item = null;

window.show_sub_menu = function(cath) {
    if (menu_item) {
        menu_item.style.visibility = 'hidden'; //Make sure to show one menu at a time
    }

    menu_item = window.document.getElementById("s" + cath);
    menu_item.style.visibility = 'visible'; //Show menu

    if (timer) {
        window.clearTimeout(timer); //Reset timer, so menu is kept open
        timer = null;
    }
};

window.start_timer = function() {
    timer = window.setTimeout(close_sub_menu, countdown);
};

window.close_sub_menu = function() {
    menu_item.style.visibility = 'hidden';
};

Answer 1

首先，您应该避免使用<div>标记中的<li>，因为这不是语义。

相当不错的是只有html和css样式的多级菜单构建。

<强> HTML

 <div id=m_wrapper>
     <ul id=menu>
            <li>Item 1
                <ul>
                    <li><a href=#>Item 1.1</a></li>
                    <li><a href=#>Item 1.2</a></li>
                    <li><a href=#>Item 1.3</a></li>
                </ul>
            </li>
            <li>Item 2</li>
     </ul>
 </div>

CSS STYLES

#m_wrapper, #menu, #menu li  {
    position:relative; 
}
#m_wrapper {
    display:table; 
}
#menu li {
    float:left;
    width:100px;
    list-style-type:none;
}
#menu li ul {
    display: none;
}
#menu li:hover ul {
    display: block;
    margin: 0 10px;
    padding: 0;
}

Answer 2

你不必那么复杂。

当然你可以通过javascript做同样的事情，但是通过jQuery看看它是多么容易，可读和简单。

请参阅此DEMO

只需使用以下脚本

即可

$('#menu li').hover(
    function(){
            $(this).stop().animate({height: '100px'},1000,function(){});
            $(this).find('div').show(600);
        }//gets called upon mousehover
    ,
    function(){
            $(this).stop().animate({height: '20px'},1000,function(){});
        } //gets called upon mouseout
  ); //hover ends

而且，我不知道为什么你写了很多CSS。只需使用这些：

#menu
{
    list-style:none;
}
#menu li
{
    width:100px;
    border:1px Solid #CCC;
    text-align:Center;
    cursor:pointer;
    height:20px;
    overflow:hidden;

}
#menu li div
{
    border:1px Solid #CCC;
}
#s0 
{
    height:auto;
}
#s0 a
{
    display:block;
}

通过它可以做很多事情，比如选定的下拉项目。通过箭头键选择什么不是。 jQuery让你很简单。

Answer 3

仅使用HTML和CSS就可以很容易地实现这一点。使用CSS过渡时，我们可以在悬停时使菜单淡出。

示例

我也把它放在JsFiddle
上
<强> HTML

<nav> <ul id="menu"> <li> <a href="#">Home</a> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> </ul> </li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav>

<强> CSS

#menu li { position: relative; display: inline; list-style: none; padding-left: 15px; } #menu ul { margin: 0; padding: 0; list-style: none; opacity: 0; position: absolute; top: 20px; left: 5px; // Transitions for our fade effect. -webkit-transition: opacity 2s ease-in-out; -moz-transition: opacity 2s ease-in-out; -ms-transition: opacity 2s ease-in-out; -o-transition: opacity 2s ease-in-out; transition: opacity 2s ease-in-out; } #menu ul li { display: block; } #menu li:hover > ul { opacity: 1; // This stops the transition from happening on hover. -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }

Answer 4

纯CSS下拉菜单

http://jsfiddle.net/steelywing/GANeX/8/

.nav {
    background-color: #def;
    height: 20px;
}

.nav * {
    transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -webkit-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
}
li {
    display: inline-block;
    height: 20px;
}

.dropdown li {
    display: block;
}

.dropdown ul {
    visibility: hidden;
    opacity: 0;
    margin-top: -2px;
}

.dropdown:hover ul {
    visibility: visible;
    opacity: 1;
}

Answer 5

请记住..如果你决定实现淡入淡出版本，你应该使用crosbrowser opacity，如下所示：

 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 filter: alpha(opacity=100);
 -moz-opacity: 1;
 -khtml-opacity: 1;
 opacity: 1;

下拉菜单隐藏菜单

5 个答案: