Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 627

Aug 26th, 2009

Unordered Lists

Expand Post »

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:

HTML and CSS Syntax (Toggle Plain Text)
<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>
<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.

Similar Threads

List list list in HTML and CSS
Help with 2-Tier Navigation in PHP
IMG problem in IE7 in PHP
Creating HTML structure using lists in HTML and CSS
The most famous CSS web sites galleries in the world in HTML and CSS

Duki

Reputation Points: 817

Solved Threads: 32

Nearly a Posting Virtuoso

Offline

1,474 posts
since Jun 2006

Permalink

Aug 26th, 2009

Re: Unordered Lists

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

case 1:

HTML and CSS Syntax (Toggle Plain Text)
 <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>
 <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:

HTML and CSS Syntax (Toggle Plain Text)
 
<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>
 
<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

chavansoft

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

15 posts
since Aug 2009

Permalink

Sep 2nd, 2009

Re: Unordered Lists

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.

HTML and CSS Syntax (Toggle Plain Text)
 
<style>
 
ul li {
text-decoration : none;
}
 
</style>
<style>

ul li {
text-decoration : none;
}

</style>

Last edited by AdrianaTX; Sep 2nd, 2009 at 3:30 pm.

AdrianaTX

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

9 posts
since Sep 2009

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: Good web page designer for Linux

Next Thread in HTML and CSS Forum Timeline: image slideshow..

DaniWeb Message

Cancel Changes

User Name
Password