Question

我在做什么？网站的导航栏。我创建了它等等但是当我去其中一个子菜单时它就消失了..

这是我的HTML：

<ul id="menu">
    <li><a href="#">Welcome</a></li>
    <li><a href="#">Review</a>
        <ul>
            <li><a href="#">Customer Reviews</a></li>
            <li><a href="#">Leave a Review</a></li>
        </ul>   
    </li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Discounts</a>
        <ul>
            <li><a href="#">Refer us!</a></li>
            <li><a href="#">Claim discount</a></li>
        </ul>   
    </li>
    <li><a href="#">Send me an email!</a>
    </li>

</ul>
</nav>

和我的CSS：

/* nav */

nav{
text-align:center;
}

nav a:visited{
    color:black;
}

nav a{
    text-decoration:none;
    color:black;

}

#menu {
margin:0 auto;
display: inline-block;
list-style-type:none;
padding:0;
}

#menu li {
    float: left;
    position: relative;
    list-style-type: none;
    background:white;
    border:1px solid black;
    margin-left:10px;
    margin-top:5px;
    border-radius:4px;
}

#menu li a {
font-family:helvetica;
display:block;
padding:10px 10px;
text-decoration:none;
}   

#menu li a:hover {
    color:orange;
}

#menu li ul {
        background: none repeat scroll 0 0 #ffffff;
        margin-top:6px;
        margin-right:1px;
        padding: 2px; 
    }

/*#menu, #menu ul {
    margin:0 auto;
    padding: 0;
}*/
#menu li {
    float: left;
    position: relative;
    list-style-type: none;
}

#menu > li:hover > ul {
    display: block;

}
#menu > li > ul {
    display: none;
    position: absolute;
}
#menu li a {
    white-space: nowrap;
}

和一个小小的JSFiddle：http://jsfiddle.net/nv741s01/

如果将鼠标悬停在菜单选项[具有子菜单]上足够长的时间然后执行它，它就会起作用，但是每次他们想要访问时，人们都不愿意等待三秒钟子菜单，所以如何解决它，以便它一旦你去它就能工作？

任何帮助都会非常感谢，提前谢谢：）

Answer 1

这是因为子菜单和菜单之间有一点差距，这是固定的JSFiddle： http://jsfiddle.net/nv741s01/3/

以下是我改变的内容：

#menu li ul {
    background: none repeat scroll 0 0 #ffffff;
    margin-top: 1px;
    margin-right:1px;
    padding: 2px; 
}

我将margin-top更改为1px。

Answer 2

元素的margin不捕获悬停事件。改用填充。进行这些更改：

#menu li {
    float: left;
    position: relative;
    list-style-type: none;
    background:white;
    padding-left:10px;
    padding-top:5px;
    margin:0;
}

/* add this rule */
#menu li a {
    border:1px solid black;
    border-radius:4px;
}

#menu li ul {
        background: none repeat scroll 0 0 #ffffff;
        margin-top:0px;
        margin-right:1px;
        padding: 2px; 
    }

小提琴：http://jsfiddle.net/nv741s01/2/

Answer 3

您正在使用margin将子菜单放置在远离主项目的位置。由于保证金不是实际元素的一部分，因此它不会触发任何hover行为。相反，在子padding元素上使用ul，因为填充实际上被视为子框的一部分。这样，当鼠标从父级移动到子级时，将使悬停行为始终触发。

你还描述了某个地方有3秒钟的延迟 - 这段代码是不可能的，我无法再显示它。

Answer 4

您的下拉菜单正在消失，因为当您向下移动鼠标光标时，父菜单项和子菜单项之间存在间隙。

当鼠标离开父li空间时，它不再适用于悬停状态，因此忽略CSS规则，使子菜单隐藏。

如果有帮助，我倾向于使用边距和填充的组合来“拼合”父菜单和子菜单，以帮助导航。

导航栏下拉不工作

4 个答案: