CSS.... Help Needed...

I am developing this site

www.thehomesource.com

I would prefer to have a bold underline look when hovering over my inner pages as opposed to the present block look, something similar to the way this site lnavigation looks here


Can someone clue me in on what I am replacing to this css:

#navigation .selected,#navigation a:hover
{
background:#B88C63;
color:#333;
text-decoration:none;
}


THANKS!!!

 

Try this:

#navigation .selected, #navigation a:hover
{
background:none;
color:#333;
text-decoration:none;
border-bottom:2px solid #900;
}

Code (markup):

 

Ok, that worked but I would like to tighten up the underlining to only mirror the text, can someone guide me on this...here is the full css:

/***** Navigation *****/

#navigation ul,#navigation li
{
margin:0;
padding:0;
}

#navigation
{
background:#FFFFFF;
color:#fff;
font-size:1em;
height:2em;
line-height:2em;
}

#navigation li
{
float: left;

list-style:none;
white-space:nowrap;
}

#navigation li a
{
background:inherit;
color:#990000;
display:block;
font-weight:bold;
padding:0 12px;
text-decoration:none;
text-transform:uppercase;
}

* html #navigation a {width:5%;}

#navigation .selected,#navigation a:hover
{
background:#white;
color:#333;
text-decoration:none;
border-bottom:4px solid #B88C63;
}

#navigation1 ul,#navigation1 li
{
margin:0;
padding:0;
}


THANKS!

 

Still need a little bit of help with this...thanks

 

Are you just looking for text-decoration:underline; ? or is that not think enough?

 

Yes, I want to underline the text but for some reason the underline bar is wider than the text and I was hoping to clean this up...thx

 

check for blank space on your markup (xhtml) before and after your link

<a href="#"> link </a>
<a href="#">link</a>

Code (markup):

or try adjusting your padding

 

work good