Nav Bar - Cant Get The correct look & feel

[airsoft4you]

Hi All I am trying to copy the following colours/look & feel of this nav bar however I cannot work out what I am doing wrong. I have broken down the layers and then used them in their specific positions (ie hover and background colour) however I cannot get it to look lik it for some reason

 

www.airsoft4you.com/prestashop is where I am trying to do it

 

Please see attached file for the nav bar look and feel, it is only the look and the hover that I am really after, I dont want the drop down affect.

 

Can Anyone Help

 

Any help would be much appreciated,

 

If you need anymore info please feel free to ask

 

Kind Regards

 

Toby

dark-drop-down.zip

[Carlsen]

Hi Airsoft4you,

 

I hope this helps. I made it in the bottom of the global.css, hence the !important rules (to overwrite your css).

 

You can insert this code in the appropriate css file. Then you should be able to remove the !important tags along with the .sf-menu > * selector, and still keep the style.

 

.sf-menu {background:#222!important; border-radius:2px; box-shadow:0 1px 3px 0 #000 inset; height:34px; margin:10px 0!important; padding:0; width:980px}

.sf-menu > *{background:none!important; border:none!important}

.sf-menu > li:last-child{border-right:1px solid #151515!important}

.sf-menu > li a{border-left:1px solid #151515; border-right:1px solid #292929}

.sf-menu > li:hover{background:#111!important; box-shadow:0 0 3px 0 #000 inset}

.sf-menu > li:hover a{background:none!important; border-left:1px solid #000!important; border-right:1px solid #111!important; text-shadow:0 1px 0 #000!important}

Edited April 20, 2013 by Carlsen (see edit history)

[vekia]

i checked your solution and it works like a charm, so i can go ahead and mark this thread as solved. Anyway, if this will not work for you (@airsoft4you), please let us know about that

 

regards