# \[Pro\] Changing CSS Menu Underlines

**URL:** <https://discourse.softpress.com/t/pro-changing-css-menu-underlines/5258>\
**Category:** Freeway\
**Created:** [July 9, 2009, 9:58am UTC](https://discourse.softpress.com/t/pro-changing-css-menu-underlines/5258 "2009-07-09T09:58:03Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![wingnut](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/w/d2c977/32.png) [@wingnut](https://discourse.softpress.com/u/wingnut)\
**Post date:** [July 9, 2009, 9:58am UTC](https://discourse.softpress.com/t/pro-changing-css-menu-underlines/5258/1 "2009-07-09T09:58:03Z")

</div>

Hi people,

Is there a way to alter the line weight and colour of the CSS Menu underlines without affecting the menu text?

For instance… if I change the colour of the hover state and click on underline, the colour of the text in the menu changes also.

Any thoughts as to how I can achieve a CSS menu whereby the underline thickness is say 3 point and a different colour to the text in the menu.

Hope that makes sense. Thanks for your help

Jon

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![wingnut](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/w/d2c977/32.png) [@wingnut](https://discourse.softpress.com/u/wingnut)\
**Post date:** [July 10, 2009, 1:27pm UTC](https://discourse.softpress.com/t/pro-changing-css-menu-underlines/5258/2 "2009-07-10T13:27:51Z")

</div>

Any ideas anyone??

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Joe2](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/j/3e96dc/32.png) [@Joe2](https://discourse.softpress.com/u/Joe2)\
**Post date:** [July 10, 2009, 2:14pm UTC](https://discourse.softpress.com/t/pro-changing-css-menu-underlines/5258/3 "2009-07-10T14:14:33Z")

</div>

Nope, the weight and size of the underlines is based on the size of  
the text, so you would need to change both, not one or t’other.

Joe

On 9 Jul 2009, at 10.53, wingnut wrote:

> Hi people,
> 
> Is there a way to alter the line weight and colour of the CSS Menu  
> underlines without affecting the menu text?
> 
> For instance… if I change the colour of the hover state and click  
> on underline, the colour of the text in the menu changes also.
> 
> Any thoughts as to how I can achieve a CSS menu whereby the  
> underline thickness is say 3 point and a different colour to the  
> text in the menu.
> 
> Hope that makes sense. Thanks for your help
> 
> Jon
> 
> > Any ideas anyone??
> > 
> > * * *
> > 
> > freewaytalk mailing list  
> > email@hidden  
> > Update your subscriptions at:  
> > [http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![wingnut](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/w/d2c977/32.png) [@wingnut](https://discourse.softpress.com/u/wingnut)\
**Post date:** [July 10, 2009, 2:17pm UTC](https://discourse.softpress.com/t/pro-changing-css-menu-underlines/5258/4 "2009-07-10T14:17:23Z")

</div>

Ahh I see… I kind of thought that may be the case.

Would there be a way to create it using styles on a list element. I can do it with a vertical list, but is it possible to create a horizontal list this way?

Cheers

Jon

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![waltd](https://discourse.softpress.com/user_avatar/discourse.softpress.com/waltd/32/2720_2.png) [@waltd](https://discourse.softpress.com/u/waltd)\
**Post date:** [July 10, 2009, 2:22pm UTC](https://discourse.softpress.com/t/pro-changing-css-menu-underlines/5258/5 "2009-07-10T14:22:35Z")

</div>

You could do this by turning off the native underlining (uncheck the underline links box in the Action) then add the underline back as a CSS border on the bottom of the link. Use padding to generate space away from the text, negative margin in the same amount to bring the text back down to the baseline, and you would have full control over the color and width (and style) of the underline.

The down-side to this is that you would have to figure out the precise CSS selector to use to target those links. If you look in the head of your page, you’ll see a lot of styles that have umpty-zillion asterisks in them. Those are the styles generated by the CSS Menus action. They’re not much fun to read.

Walter

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![wingnut](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/w/d2c977/32.png) [@wingnut](https://discourse.softpress.com/u/wingnut)\
**Post date:** [July 10, 2009, 2:28pm UTC](https://discourse.softpress.com/t/pro-changing-css-menu-underlines/5258/6 "2009-07-10T14:28:17Z")

</div>

Yikes… I see what you mean.

Hmm… perhaps its the easier workaround would be to turn off the underline in the CSS palette and then create a graphic space with a gif underline and add it as a background. I guess its cheating but I guess it could work.

Cheers again

Jon

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)