How do you change the color and appearance WORDPRESS CUSTOM MENU WIDGET

.menu-arroyo-grande-real-estate-container li {
 background: #4c4c4c; /* Old browsers */
 background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6-15 */
 background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10-25,Safari5.1-6 */
 background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
}
.menu-arroyo-grande-real-estate-container li a {
  color: #fff;
}
.menu-arroyo-grande-real-estate-container li a:hover {
  color: #ccc;
}

more or less

To add CSS: If you are using WordPress 4.7, use the “Custom CSS” option in the customizer. If your theme has a custom CSS option, use that to add the CSS shown above. If not, install the plugin Simple Custom CSS. Or, if you have Jetpack installed, enable its Custom CSS module.

Learn to use the Chrome Developer Tools to help you see and test changes to your CSS.

The old menu is using a background image for the black background of the links:

#dc_jqverticalmegamenu_widget-17-item ul li a {
	background: url(skins/images/bg_black.png) repeat-x 100% 0;
	text-shadow: 1px 1px 1px #000;
}

If you want the custom menu to look like the older menu, you’ll need to copy that image, which I suspect is currently in the /wp-content/plugins/jquery-vertical-mega-menu/images folder, to somewhere you can access it after you delete the old plugin. For example, you could upload it to the /images folder of your current theme.

You could then try the following custom CSS:

ul#menu-services.menu.right a, .widget-area a {
	background: url(images/bg_black.png) repeat-x 100% 0;
	text-shadow: 1px 1px 1px #000;
	text-decoration: none;
}

After that, you’ll need to add the CSS for the :hover, :focus, and :visited states of the new menu to match the old.

You can use the Developer Tools that come with Chrome or Firefox to look at the CSS of the old menu to see what you need for the new.

Thank you for your reply.

linux4me2, I am a afraid to remove and add again. Can I just add that CSS code without removal of the old first. I know it would be duplicated, but I would work on one page at a time creating the new and removing the old.

Steve -I see you added Arroyo Grande – would I need that for each widget menu?

My developer was helping me with this, but we had a falling out. He held me hostage with the knowledge I need to make these type of changes. Therefore, I am not sure exactly where I would put the code you both propose I need to add.

I looked under customizing Additional CSS, buy as mentioned in my original post, adding code there did not make any change.

I think that the developer has created a child, to my theam, but I have no idea where that is. I clicked on the active Theam CUSTOMIZE, but that took me to the same menu where I found the ADDITIONAL CSS>
/*
You can add your own CSS here.
Click the help icon above to learn more.
*/

Where should I add provided CSS code?

I am trying to avoid adding additional plug-ins for security reasons.

• This reply was modified 7 years, 8 months ago by norwood451.

In my post, I explained how to safely add CSS.

Thank you Steve. I took a leap of faith and added all of your code the the customize css menu. It worked, but it is not the same as the older widgit.

Is there a way to make it look and act like the menu above the test.

Also, will it work on all of the pages that have the custom menu or do I need to duplicate the code for page that uses the code. I ask because you wrote in the code arroyo grande, and I will be also adding it to my pismno beach page

https://dnorwood.com/arroyo-grande-homes/

norwood: I gave you the general idea. Feel free to tweak the CSS. Use the Chrome inspector to see which element selectors to target.

Thanx Steve. I wish.

I have no idea how to do that. I do not know any of the that language, Your code is very complected.

I can help you with photography of selling home or growing wine grapes ?? but I do not have the mind for that kind of code.

I guess it is easy if you know how.