CODEWITHSUNDEEP
htmlcss
Cooper Timewell
Cooper Timewell

Reputation: 45

Underline function not working when position is absolute?

So I have a number of div's that i want underlined when they are hovered over, but it isn't working... I think it is because the position is set to be absolute but I need it to be like that? Please help me! Thankyou.

#alltext {
  font-family: Calibri;
  font-size: 40px;
}
#Home {
  position: absolute;
  left: 550px;
  top: 30px;
}
#Products {
  position: absolute;
  left: 760px;
  top: 30px;
}
#Contact {
  position: absolute;
  left: 1020px;
  top: 30px;
}
a {
  color: white;
}
a:hover {
  text-decoration: underline;
}
<div id="alltext">
  <a href="index.html">
    <div id="Home">Home</div>
  </a>
  <a href="products.html">
    <div id="Products">Products</div>
  </a>
  <a href="contact.html">
    <div id="Contact">Contact</div>
  </a>
</div>

Upvotes: 0

Views: 133

Answers (2)

Pugazh
Pugazh

Reputation: 9561

Modify your CSS as below.

a:hover div {
  text-decoration: underline;
}

Upvotes: 1

Akshay
Akshay

Reputation: 14348

Give the id to the <a> instead of the <div> and it will work as you need http://jsfiddle.net/2kh7bof7/

<a href="products.html" id="Products">
<div >Products</div>
</a>

Upvotes: 0

Related Questions