css菜单下拉不在预期位置答案

【问题标题】：css menu drops down not at intended placecss菜单下拉不在预期位置
【发布时间】：2014-05-06 14:10:48
【问题描述】：

我对制作网站非常陌生，主要是出于爱好，现在我正在为我的一个朋友制作一个网站。

到目前为止一切都很好，但我在菜单上苦苦挣扎。（它也是一个wordpress网站。）

您可以在http://www.decapeerwerken.be预览它

设计还不错，但是当您进入下拉菜单时，问题仍然存在。只有当您将鼠标悬停在父链接上时，您才能将鼠标悬停在不可接受下拉菜单的范围内。

我可以看到自己 ul.submenu 的高度太高但我找不到。这个小问题之后已经找了好几天了...

提前感谢你们帮助我！

代码：

.menu {
    text-transform: uppercase;
    font-weight: bold;
    background: -webkit-linear-gradient(#FEF9CD, #FCE1BC);
    background: -o-linear-gradient(#FEF9CD, #FCE1BC);
    background: -moz-linear-gradient(#FEF9CD, #FCE1BC);
    background: linear-gradient(#FCE3BC, #FEF9CD, #FCE1BC);
    border: 1px solid #FCE1BC;
    border-radius: 3px;
    box-shadow: 1px 1px 10px #A4743d;
}
ul.nav-menu li a {
    color: #604443;
    font-family:'Oregano', cursive;
}
.nav-menu {
    list-style-type: none;
    height: 40px;
    margin: 0;
}
.nav-menu li {
    float: left;
    position: relative;
    padding: 0;
    line-height: 40px;
}
.nav-menu li a {
    display: block;
    padding: 0 15px;
    color: #fff;
    text-decoration: none;
}
.nav-menu li:hover {
    color: #965A3E;
    transition: color 0.8s, box-shadow 0.3s;
    background: linear-gradient(#FCE3BC, #FFFCE3, #FCE1BC);
    box-shadow: 1px 1px 10px #A4743d;
    margin-top: -1px;
    background-position: 0 -40px;
}
.nav-menu li ul {
    opacity: 0;
    position: absolute;
    left: 0;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.nav-menu li:hover ul {
    padding-top: 5px;
    opacity: 1;
    transition: opacity 0.8s;
}
.nav-menu li:hover ul li {
    float: none;
    position: static;
    height: 30px;
    line-height: 30px;
    background: linear-gradient(#FCE3BC, #FEF9CD, #FCE1BC);
    transition: background-color 1.4s, color 0.8s, box-shadow 0.5s;
    color: #965A3E;
    margin-bottom: 5px;
    width: 200px;
}

【问题讨论】：

标签： html css wordpress menu

【解决方案1】：

你的问题是悬停改变了布局（内容占据了更多的空间，即使它们被隐藏，当父没有悬停时），而且因为你只是改变opacity，用户仍然可以悬停隐藏时的内容。

我设法通过转换 visibility 和 opacity 解决了这个问题，这意味着当内容不可见时，您不能再将鼠标悬停在内容上：

.nav-menu li ul {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.nav-menu li:hover ul {
    padding-top: 5px;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s, visibility 0.8s;
}

【讨论】：

【解决方案2】：

将“不透明度：1”（不透明度：0）替换为“显示：块；” （“显示：无”）

【讨论】：

谢谢！我应该给你买杯啤酒！