Question

我已经制作了一个下拉菜单，我想更改链接的颜色但是如果我添加：

a {
    color: white;
}

即使我添加到每个div，它也会使下拉列表不可见元素属性

overflow: visible;

为什么会发生这种情况？

https://jsfiddle.net/mvetktg0/

Answer 1

您的白色链接会在深灰色背景之外落到白色上，这就是您无法看到它们的原因。请考虑以下编辑：

.link-container a {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 40px 0 40px 0;
    color: #fff;
}

.dropdown-link {
    background: steelblue;
}

Answer 2

它不会让我看不见文字 - 只是白色。如果你添加：

a {
    background: #404040;
}

你会看到你的白色文字更好。希望我能帮忙！：）

Answer 3

以下代码适合您：

text-shadow：0 1px black;

Answer 4

我已经改变了你的css，使事情更加明显。

我更改了body和dropdown-link的背景颜色。此外，我减少了图像的宽度，因此它可以适合。

body {
    margin: 0;
  background:lightgrey;
}

a {
    text-decoration: none;
  color:white;
}

.header {
    width: 100%;
}

.head-menu {
    background-color: #404040;
}

.image-container {
    display: inline-block;
    width: 100px;
}

.image-container img {
    display: inline;
    width: 100%;
    margin: 0;
}

.link-container {
    display: inline-block;
    width: 16%;
    text-align: center;
    overflow: hidden;
}

.link-container a {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 40px 0 40px 0;
}

.dropdown-link{
  background-color: gray;
}

.dropdown1-content {
    display: none;
    overflow: hidden;
}

.dropdown2-content {
    display: none;
    overflow: hidden;
}

.dropdown-link a {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0 0 5px 0;
}

.dropdown1:hover .dropdown1-content {
    display: block;
    position: absolute;
    width: inherit;
    z-index: 99;
}

.dropdown2:hover .dropdown2-content {
    display: block;
    position: absolute;
    width: inherit;
}

更改链接颜色使下拉菜单得到切割

4 个答案: