Question

我使用了一个教程来构建一个响应式导航菜单，它在这里工作得很好： http://nova.umuc.edu/~ct386b09/giotto/index.html

我添加了徽标和其他一些元素，并且当媒体大小发生变化时丢失了悬停，如下所示： http://nova.umuc.edu/~ct386b09/giotto2/index.html

我感觉它在某处，但不能告诉它可能是什么：

HTML：

<ul class="nav hidden">

CSS：

ul.nav
{ list-style-type:none;
margin:0;
padding:0;
position: absolute;}

ul.nav li a:hover + .hidden, .hidden:hover {
display: block;
z-index: 999;}`

如果需要，我可以发布整个HTML / CSS。

Answer 1

CSS的第81行中存在此规则，宽度低于759px：

ul.nav {
    position: static;
    display: none;
}

并没有改变diplay: none的悬停规则。因此，您应该直接在上面的规则下添加此规则：

#navbar:hover ul.nav {
    display: block;
}

Answer 2

问题是，您的#header和#navbar具有硬编码的height值和.nav元素，而#menu是float:left到期到它所拥有的nav课程。

您需要为移动版本中的height:auto和#header设置#navbar，并在overflow:hidden上添加#navbar或移除{{} 1}}来自float:left。

所以实际问题是.nav元素覆盖在打开的菜单上，并且它拦截了鼠标事件。

当媒体尺寸缩小时，导航丢失

2 个答案: