CODEWITHSUNDEEP
htmlcsstext-decorations
Steve
Steve

Reputation: 655

Why does text-decoration not work in my code?

'list item 2' in my code does not have the hyperlink underlined in the drop down hyperlink until i hover over it. This is what i expect and want it to do.

The problem is when i try to add more than one hyperlink to the drop down links as shown in 'list item 1' the hyperlinks are both underlined before i hover over them.

I had to put link 1 & 2 for 'list item 1' inside a because without it link 1 & 2 overlap each other. If i add the <br> between them when overlapped this also affects 'list item 2' by pushing it down.

To be clear i want 'list item 1' and 'list item 2' on the same level and all the links to not be underlined until i hover over them.

I've searched online and it seems issues with 'text-decoration: none' are quite common but i couldn't find any solution to my particular problem.

In my example i've left the href attributes blank as what they link to isn't important 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>

Upvotes: 2

Views: 290

Answers (2)

Temani Afif
Temani Afif

Reputation: 272965

You need to target the a element so you can use the extra wrapper in both situation and adjust the CSS like below:

I have also corrected the invalid HTML as you are allowed to only use li as child of 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>

Upvotes: 4

Hien Nguyen
Hien Nguyen

Reputation: 18975

Adjust these css, you need add css for .dropdown-content a and move a:hover to end

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

Upvotes: 1

Related Questions