PDA

View Full Version : 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/dynamicindex1/ddsmoothmenu.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:


<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/Support_files/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:

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

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

<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:


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

The important keyword is probably not needed:


<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




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/Support_files/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).