Help with a styling issue Smooth Navigational Menu

[jasonmullee]

Hi all, I've installed the very excellent Smooth Navigational Menu but would like to make a few modifications but my CSS skills aree not good enoughg. I would like to change the menu backgrounds and background on mouse over to an image. I would also like to have the last top level meny item to have a different default image (a stand out colour) on default. I would appreciate any advice. Cheers

[rangana]

Go to ddsmoothmenu.css.

If you read the code, it was well explained.

If you would like to change the background of the top level menu, it's this part:

/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #414141; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

...you can change highlighted to any color of your desire.

If you intend to replace it with an image, do it like this:

background: #414141 url('bg.gif');; /*background of menu items (default state)*/

For the hover state background, it's this part:

.ddsmoothmenu ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}

Hope that helps.

[jasonmullee]

thanks for the reply.

I understand how to change the colour for both states, my CSS is good enough for that.

My question was:

1. how to change the background states of the tabs to an image
2. how to have the last tab (to the right hand side) in its default state a different image (and colour) to the other tabs.

Hope this helps clarify my question and demonstarte my reading ability.

Thanks.

[jasonmullee]

I tried the image change for the tab it works fine with a repeat-x thanks.

So how can i define the last tab as a different image to the others in the default state, i tried different html tags <b> <i> <dd> <dt> to allow the definition of a further CSS state but it messes up the tab format???

eg.


/*Top level menu link items style*/
.ddsmoothmenu ul li a b{
display: block;
background: #414141; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

and the menu code to:

<li><a href="#"><b>Offertas</b></a></li>

Thanks again in advance.

[ericzad]

Ditto on the last tab color/img change. I'm stuck as well. I tried everything I could think of html wise to make that last li have a diff bgcolor and think the JS won't let it. Anyone have a answer?

Also, related to breaking that last tab away... Guess if there were some way to make a seperate class for one tab I could strip away the "border-right" as well since it looks pretty stupid with nothing to the right of it.



....help?

[mundeno]

Has anyone found a solution to either of these? I want to change the color of the submenu choices, and have the main links use a x-repeated 1px gradient image instead of a hex color....I know how to do the bg image, but I cant seem to figure out how to change the css file to give me a different color for the submenus........I came close, but no cigar...sometimes it changes the submenu to transparant and sometimes it pads the submenu heavily with the color I want to change it to.....

and that thing on the right needs to go too.....any help would be GREAT.