How to change sub menu font color and background color

This tutorial will show you how to customize the drop down sub-menu background color and font color.

1) Click here to open your Weebly editor
2) Click on “design” then into “edit html/css”
3) Click into “main_style.css” and locate this code:

#wsite-menus .wsite-menu li a, #wsite-menus .wsite-menu li a {
position: relative;
display: block;
background: #fff;
border: none;
text-decoration: none;
font-size: 13px;
font-weight: normal;
line-height: 1;
padding: 10px 5px;
color: #000;
zoom: 1;
-webkit-transition: .5s ease-out;
-moz-transition: .5s ease-out;
-o-transition: .5s ease-out;
-ms-transition: .5s ease-out;
transition: .5s ease-out;
}

Depending on your theme design, the codes may look different. The important thing here is to locate the code highlighted above to indicate which code controls the drop down sub-menu.

4) Styling change

#wsite-menus .wsite-menu li a, #wsite-menus .wsite-menu li a {
position: relative;
display: block;
background: #fff;
border: none;
text-decoration: none;
font-size: 13px;
font-weight: normal;
line-height: 1;
padding: 10px 5px;
color: #000;
zoom: 1;
-webkit-transition: .5s ease-out;
-moz-transition: .5s ease-out;
-o-transition: .5s ease-out;
-ms-transition: .5s ease-out;
transition: .5s ease-out;
}

  1. Font color: color: #ffffff; – You can choose your hex color code here: colorpicker
  2. Background color: background: #fff; – You can choose your hex color code here: colorpicker

5) Once you are happy with your change, save & re-publish your site for the change to take effect.