Smooth Navigation Menu Styles

**vbchjack** · 10-04-2013, 05:16 AM

1) Script Title: Smooth Navigation Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...smoothmenu.htm

3) Describe problem: I have a need to change the background color of one (and only one) sub-menu item. It seems it should be a simple matter but something is blocking me.

I have entered the 'style' in the <li> element. Should this not work? Have I missed something in the css file that prohibits it? Here is the line: <li style="background-color: #008000;"><a href="#">Materials</a></li>

BTW I really love this script and appreciate having it. I am using it on one site with complete satisfaction. This issue is for a new project ... it is important that the color of this one element be green.

Thanks
Jack

**jscheuer1** · 10-04-2013, 05:45 AM

Try adding the !important keyword:

Code:

<li style="background-color: #008000 !important;"><a href="#">Materials</a></li>

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

**vbchjack** · 10-04-2013, 03:02 PM

John ... Thanks for the quick reply. The !important keyword didn't help.
The site is not finished but you can see the operational menu in its current state at http://framemakers.us/AbsoWebdocs/home.htm ... The problem code is in an external file at http://framemakers.us/AbsoWebdocs/Su...les/exmenu.htm (line 33). Writing this, I recall not mentioning having changed the background color of the menu bar from default to #E0E0E0. (Line 3 in your ddsmootmenu.css ... no other changes there).

**Deadweight** · 10-04-2013, 05:52 PM

Looking at your code and view that element i noticed it says this:

Code:

<li style="color: #008000 !important;"><a href="#">Materials</a></li>

Doesn't it need to be this (for background-color):

Code:

<li style="background-color: #008000 !important;"><a href="#">Materials</a></li>

**jscheuer1** · 10-04-2013, 06:15 PM

That's right Crazykid69. And in this particular case, the li isn't the element whose background is being seen. It's the a tag's. So they would need to apply it to the a tag:

Code:

<li><a style="background-color: #008000 !important;" href="#">Materials</a></li>

The important keyword is probably not needed:

Code:

<li><a style="background-color: #008000;" href="#">Materials</a></li>

**vbchjack** · 10-04-2013, 09:05 PM

Amazing what can be done when you get it right. I never would have thought to put it in the <a> tag ... and !important is not needed. Originally it was "background-color" in the <li> tag ... in desperation I was trying everything to see the effect and did not change it back. Thanks guys!

**vbchjack** · 08-11-2014, 08:12 PM

An earlier post appears below. Note the references to urls. Google picks up on this and gives me error messages as these files no longer exist. Can these urls be deleted??? or somehow hidden???
Thanks Jack

Originally Posted by vbchjack

John ... Thanks for the quick reply. The !important keyword didn't help.
The site is not finished but you can see the operational menu in its current state at http://framemakers.us/AbsoWebdocs/home.htm ... The problem code is in an external file at http://framemakers.us/AbsoWebdocs/Su...les/exmenu.htm (line 33). Writing this, I recall not mentioning having changed the background color of the menu bar from default to #E0E0E0. (Line 3 in your ddsmootmenu.css ... no other changes there).