HTML and CSS

Unordered Lists

Please support our HTML and CSS advertiser: 50% off 6 Months Dedicated Server Hosting from 1&1!

•

Join Date: Jun 2006

Posts: 1,171

Reputation: Duki has a spectacular aura about

Solved Threads: 9

Duki

Offline

Veteran Poster

Unordered Lists

Aug 26th, 2009

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:

 Help with Code Tags 
 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.

It is practically impossible to teach good programming style to students that have had prior exposure to Basic; as potential programmers they are mentally mutilated beyond hope of regeneration.

-Edsger Dijkstra

•

Join Date: Aug 2009

Posts: 15

Reputation: chavansoft is an unknown quantity at this point

Solved Threads: 0

chavansoft chavansoft is offline

Offline

Newbie Poster

Re: Unordered Lists

Aug 26th, 2009

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

case 1:

 Help with Code Tags 
 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:

 Help with Code Tags 
 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

•

Join Date: Sep 2009

Posts: 9

Reputation: AdrianaTX is an unknown quantity at this point

Solved Threads: 0

AdrianaTX

Offline

Newbie Poster

Re: Unordered Lists

Sep 2nd, 2009

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.

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

ul li {
text-decoration : none;
}

</style>