Member Avatar for Duki

Is there a way to make links in unordered lists be non-underlined by default? And when the user hovers over the link, it becomes underlined?

Here's the current code:

<ul>
<li><a href="water">Water</a></li>
<li><a href="wastewater">Wastewater</a></li>
<li><a href="surveying">Surveying</a></li>
<li><a href="aerial">Aerial</a></li>
<li><a href="it">Technology Consulting</a></li>
</ul>

On the page with the lists, all of the links are underlined by default and the underline goes away when you hover over it. We want the opposite of this.

  • 3 Contributors
  • 2 Replies
  • 139 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by AdrianaTX
Member Avatar for chavansoft

Duki,
I have listed two cases for the hovers. use what you really need off

case 1:

<style>
#hover li a {
text-decoration:underline;
}
#hover li a:hover {
text-decoration:none;
}
</style>
<ul id="hover">
<li><a href="water">Water</a></li>
<li><a href="wastewater">Wastewater</a></li>
<li><a href="surveying">Surveying</a></li>
<li><a href="aerial">Aerial</a></li>
<li><a href="it">Technology Consulting</a></li>
</ul>

case 2:

<style>
#hover li a {
text-decoration:none;
}
#hover li a:hover {

text-decoration:underline;
}
</style>
<ul id="hover">
<li><a href="water">Water</a></li>
<li><a href="wastewater">Wastewater</a></li>
<li><a href="surveying">Surveying</a></li>
<li><a href="aerial">Aerial</a></li>
<li><a href="it">Technology Consulting</a></li>
</ul>

Regards
chavansoft

Member Avatar for AdrianaTX

You can also do a reset and have all ul not be underlined and only create a class for a list you want to underline.

<style>

ul li {
text-decoration : none;
}

</style>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.