Different colored link

[djcronos]

Hi all,

I'm using an open source template from oswd.org and I wanted to change the color of one of the links to make it stand out from the others. Here's the CSS code:

.nav3-grid {width:199px; border-bottom:solid 1px rgb(200,200,200);}
.nav3-grid dt a, .nav3-grid dt a:visited {display:block; min-height:2.0em /*Non-IE6*/; height:auto!important; height:2.0em /*IE6*/; line-height:2.0em; padding:0px 10px 0px 20px; border-top: solid 1px rgb(200,200,200); text-decoration:none; color:rgb(70,122,167); font-weight:bold; font-size:120%;}
.nav3-grid dd a, .nav3-grid dd a:visited {display:block; min-height:1.7em /*Non-IE6*/; height:auto!important; height:1.7em /*IE6*/; line-height:1.7em; padding:0px 10px 0px 40px; border:none; font-weight:normal; text-decoration:none; color:rgb(70,122,167); font-size:120%;}
.nav3-grid dt a:hover, .nav3-grid dd a:hover {background-color:rgb(225,225,225); color:rgb(42,90,138); text-decoration:none;}
.nav3-grid dt a.inquiry:hover, .nav3-grid dd a.inquiry:hover {color:rgb(90,90,90); text-decoration:none;}

Note the a.inquiry:hover above - I added that entire line in hopes that would change the color.

And here is the HTML in question:

  <!-- Navigation Level 3 -->
  <div class="round-border-topright"></div>
  <h1 class="first">TurnkeySolutionsNow</h1>  <!-- Navigation with grid style -->
  <dl class="nav3-grid">
   <dt><a href="whyusetsn.html">Why Use TSN</a></dt>
   <dt><a href="productdevelopment.html">Product Development </a></dt>
 <dd><a href="productdevelopment-productdevelopment.html">Product Development </a></dd>
<dd><a href="productdevelopment-engineering.html">Engineering</a></dd>
<dd><a href="productdevelopment-productdesign.html">Product Design</a></dd>
<dd><a href="productdevelopment-productprotection.html">Product Protection</a></dd>
<dd><a href="productdevelopment-engineeringservices.html">Engineering Services</a></dd>
<dd><a href="productdevelopment-industries.html">Industries</a></dd>
<dd><a href="productdevelopment-inquiry-form.html" class="inquiry">Inquiry Form</a></dd>
   <dt><a href="contact.html">Contact Us</a></dt>
  </dl>      
<p>&nbsp;</p>
  </div>

The link I want to change color is the Inquiry Form. I thought by adding class="inquiry" I could define the color, but I'm having issues.

Any help is appreciated - thanks in advance!

Patrick

[alexdunae]

Is the

a

style declared higher up in your CSS file. If it is, and it has an ID instead of class in the declaration, it will override your code.

[Setek]

What your code is saying there is that you are changing the state of

<a class="inquiry">

only on hover, not its default state.

You need to remove the

:hover

on your line:

.nav3-grid dt a.inquiry:hover, .nav3-grid dd a.inquiry:hover {color:rgb(90,90,90); text-decoration:none;}

By the way, semantically, a definition list isn't the best method of structuring a menu navigation (they are better for dialogue-style or value-pairs,) it's more suited to unordered lists:

<ul>
----<li><a>Main level menu item</a>
--------<ul>
------------<li><a>Submenu item of Main level menu item</a></li>
--------</ul></li>
----<li><a>Main level menu item 2</a></li>
----<li><a>Main level menu item 3</a></li>
</ul>