“列表项2”在下拉超链接中没有加下划线的超链接,直到我将其悬停在上方。这是我期望并希望它做的事情。
问题是,当我尝试向下拉列表链接中添加多个超链接时,如“列表项1”所示,在我将它们悬停之前,超链接都带有下划线。
我必须将“列表项1”的链接1和2放在a内,因为如果没有链接1和2,它们将相互重叠。如果我在重叠时在它们之间添加<br>
,则会通过将其按下而影响“列表项2”。
为清楚起见,我希望“列表项1”和“列表项2”处于同一级别,并且所有链接都不要加下划线,直到我将它们悬停在它们上方。
我已经在线搜索过,看来“文本修饰:没有”的问题很普遍,但是我找不到解决我特定问题的方法。
在我的示例中,我将href属性留为空白,因为它们链接到的内容在这里并不重要。
ul {
list-style-type: none;
}
a:hover {
text-decoration: underline;
}
.dropdown {
display: inline-block;
width: 100px;
height: 25px;
background-color: black;
color: white;
padding: 20px;
text-align: center;
font-size: 20px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
padding: 12px 16px;
text-decoration: none;
}
.dropdown:hover .dropdown-content {
display: block;
}
<ul>
<div class="dropdown">
<li>list item 1</li>
<div class="dropdown-content">
<a href="" target="_blank">link 1</a><br>
<a href="" target="_blank">link 2</a>
</div>
</div>
<div class="dropdown">
<li>list item 2</li>
<a class="dropdown-content" href="" target="_blank">link 1</a>
</div>
答案 0 :(得分:4)
您需要定位a
元素,以便在两种情况下都可以使用多余的包装器,并按如下所示调整CSS:
我还纠正了无效的HTML,因为您只能将li
用作ul
的子代
ul {
list-style-type: none;
}
.dropdown {
display: inline-block;
width: 100px;
height: 25px;
background-color: black;
color: white;
padding: 20px;
text-align: center;
font-size: 20px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
padding: 12px 16px;
}
.dropdown-content a {
text-decoration: none;
}
.dropdown-content a:hover {
text-decoration: underline;
}
.dropdown:hover .dropdown-content {
display: block;
}
<ul>
<li class="dropdown">list item 1
<div class="dropdown-content">
<a href="" target="_blank">link 1</a><br>
<a href="" target="_blank">link 2</a>
</div>
</li>
<li class="dropdown">list item 2
<div class="dropdown-content">
<a href="" target="_blank">link 1</a>
</div>
</li>
</ul>
答案 1 :(得分:1)
调整这些CSS,您需要为.dropdown-content a
添加CSS并将a:hover
移动到结束
.dropdown-content a{
text-decoration: none ;
}
a:hover {
text-decoration: underline ;
}
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type:none;
}
.dropdown {
display: inline-block;
width:100px;
height:25px;
background-color: black;
color: white;
padding: 20px;
text-align: center;
font-size: 20px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
padding: 12px 16px;
text-decoration: none ;
}
.dropdown-content a{
text-decoration: none ;
}
a:hover {
text-decoration: underline ;
}
.dropdown:hover .dropdown-content {display: block;}
</style>
</head>
<body>
<ul>
<div class="dropdown">
<li>list item 1</li>
<div class="dropdown-content">
<a href="" target="_blank">link 1</a><br>
<a href="" target="_blank">link 2</a>
</div>
</div>
<div class="dropdown">
<li>list item 2</li>
<a class="dropdown-content" href="" target="_blank">link 1</a>
</div>
</body>
</html>