[SOLVED] Underline upon hover
 

I would like to know how to style the Atahualpa page menu bar so that it functions exactly like the one on this Atahualpa site:

http://www.martinewicki.ch/

How do I do implement that bold + underline? Can this be done with a simple CSS insert?

Thank you.

This can be done with a CSS Insert, no PHP etc. needed

Does anyone know how such a CSS insert would be coded? Thank you.

Put this in CSS inserts:
The 307722 is a nice green. You could use any color code. Get Firebug and use it to find the class and CSS for a given element on a page. I may have stuff here that's not necessary, but I'm not very good at CSS, so I just copied what I saw and changed the color. Maybe somebody else can parse this out a bit better. I have it working on http://www.fastwomen.com/, a test site.

What this does is
border-bottom:4px solid #307722; <- set the bottom border 4px thick, solid and orange
border-left:1px solid #BFBBB9; <- set left border 1px, solid and same as backgrounnd color
border-right:1px solid #BFBBB9; <- set right border 1px, solid and same as backgrounnd color

In effect, it makes the left and right borders invisable since they are the same as the background and the bottom orange so it shows up.

I somehow removed the bit that would show the underline before any action. I didn't want it to show a: visited. I'm not sure what the x-system font is, but I do know I need to study CSS more. I guess there are continually new kinds of CSS coming down the pike.

I would think that since you specific "border-bottom" the "border-left" and "border-right" markers would be unnecessary, wouldn't they?

If i wanted the menu option to be marked with an underline when it is selected, what would I need to change in the insert?

Thank you for figuring this out.

When you are adding a CSS insert, remember the way CSS works. The last rule applies. In this case, since all three borders were assigned in a previous selector, if you only specify border-bottom, then the other two will still have their previous values. And since we are assigning two different colors, you can't use shorthand to override them all.

Thanks for everyone's input in this thread.

I have the menu working here:
http://tiny.cc/safeatahualpa

Yet when you hover over the menu, the entire page moves down as the underline appears. How can I change the CSS insert so the page does not move? I am guessing that you need to have the 4px bottom-border already defined, yet I have tried a variety of changes to the CSS insert and nothing seems to work.

try this

Thanks juggledad!