Question

我是制作网站的新手，主要是我这样做的业余爱好，现在我正在为我的一个朋友在网站上工作。

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

您可以在http://www.decapeerwerken.be

预览

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

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

先谢谢你们帮助我！

CODE：

.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;
}

Answer 1

将“opacity：1”（不透明度：0）替换为“display：block;” （ “显示：无”）

Answer 2

你的问题是悬停改变了布局（内容占用更多空间，即使它们是隐藏的，当父级没有悬停时），而且因为你只是在改变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;
}

css菜单不是在预定的位置下降

2 个答案: