Question

我正在为一家小企业设计一个网站，他们说他们想要两件事。下拉菜单和主页上的幻灯片。这样会好的，如果不是因为我必须浮动幻灯片，所以它不会干扰页面的其余部分（侧面菜单类型的东西）

问题是图像现在覆盖了下拉菜单，我能看到的唯一解决方案是移动图像或完全删除它们。如果我不必做任何事情，那就太棒了，但可以做出妥协。

下拉代码是这样的（W3代表它）：

`.dropbtn {
    background-color: #73797A;
    color: white;
    padding: 3px 7px 4px 1px;
    font-size: 35px;
    border: none;
    cursor: pointer;
    margin-top: 30px;
    border-right-style: solid;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f4f4f4;
    min-width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    width: 100%;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #30DAFC;
}`

Answer 1

有一个名为z-index的CSS属性，它定义了HTML中元素的堆栈。看看：CSS z-index

在浮动图像上叠加下拉菜单

1 个答案: