Question

我一直在摆弄一个基于'responsive-nav.js'的菜单实验并尝试添加下拉菜单。一切都会好的，但由于某种原因，我无法让下拉列表显示正确。即使将它们放在相对容器内的绝对位置。我相信这很简单，但是我无法理解它。如果我删除底部的脚本位，它可以工作，但这样我松开了切换菜单。

我为此创建了一个lint： https://dl.dropboxusercontent.com/u/5791486/dropdown2/index.html

答案如下所示：溢出：可见，但为了制作切换液，我必须为此创建额外的媒体查询：

.js #nav {
    clip: rect(0 0 0 0);
    max-height: 0;
    position: absolute;
    display: block;
    overflow: visible;
    zoom: 1;
    }

@media screen and (max-width: 40em) {
    .js #nav {
    overflow: hidden;
    }
}

就是这样，再次感谢!!!!

Answer 1

必须在top: 100%;上设置#nav ul li:hover ul，让子菜单与父母的底部对齐。

#nav ul li:hover ul  {
    display: block;
    position:absolute;
    top:100%;
  }

示例：http://jsfiddle.net/UG9cy/

响应下拉菜单冲突

1 个答案: