Help me make my menu cool!

[rjmccollam]

I have two things in mind that I want to do to take a simple menu just one step beyond, and possibly make it….cool.

Demo site is up at http://dev.wedodev.com/clients/prdale/topekalasik/

Thing 1 – I want to use jQuery to make the main navigation icons rise up on hover. I have searched around and for whatever reason have been unable to find what I am looking for and am not skilled enough to write it myself.

Thing 2 – For the drop down menu I want to have a triangle at the top of the menu. I have built the menu with some basic CSS3 and would like to keep that. I am trying not to use a full background image so I can keep the menu a dynamic height. The end result should look like this.

I would appreciate any help in pointing me in the right direction. Thanks!

[amoss]

Something like this?

http://codepen.io/pen/91/1

[rjmccollam]

This is awesome, thank you! I have implemented what you did in the demo site.

One last question…

How do I keep the main li in the “up”, or hover state when I mouse down to the drop down menu?

[amoss]

#nav li a:hover, #nav li a:focus {
position: relative;
top: -10px; }

[rjmccollam]

That is what I thought too, but it doesn’t do the trick.

[amoss]

Does this work for you?
http://codepen.io/pen/108/1

If not please explain which trick you were after.

[rjmccollam]

Thanks for the continued help.

What I want is for the main navigation tab, for example Our Process, to stay in the up/hover state when you mouse down to the drop down menu.

[amoss]

Glad to help where I can. Does this work for you or not?
http://codepen.io/pen/108/1

[rjmccollam]

Unfortunately it does not.

Let me try another stab at explaining what I want…

When you mouse over a

[Author]

Posts