When I hover over 'list item 2' in my code, the hyperlink is not underlined until then. This behavior is expected and desired.
The issue arises when attempting to add multiple hyperlinks to the drop-down links as shown in 'list item 1', where both hyperlinks are already underlined before hovering over them.
I had to enclose link 1 & 2 for 'list item 1' within a <br> tag because without it they would overlap each other. Introducing the <br> tag affects 'list item 2' by pushing it down.
To clarify, I want 'list item 1' and 'list item 2' to be at the same level and none of the links should be underlined until hovered over.
Despite searching online, issues with 'text-decoration: none' remain common, but I couldn't find a solution that addresses my specific problem.
In the presented example, I have left the href attributes blank as their destinations are irrelevant here.
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>