Dropdown menu

This snippet will change the appearance of your dropdown menu.

1) Text (color, padding, size)

2) Box element (background color)

3) Text - Active state (color, padding, size)

4) Box element - Active state (background color)

5) Text - Hover state (color, padding, size)

6) Box element - Hover state (background color)

/* Drop down menu */

/* NORMAL STATE */
/* 1) Font color and size change normal state */
.has-dropdown .nav-primary ul ul a{
    color: #fff;
    font-size:16px;
    padding:10px 15px;
}
/* 2) Background color of box normal state */
.has-dropdown .nav-primary ul ul a{
    background-color: #285285;
}


/* ACTIVE STATE */
/* 3) Font color and size change active state */
.has-dropdown .nav-primary ul ul li.active > a{
    color: #fff;
    font-size: 16px;
}
/* 4) Background color of box active state */
.has-dropdown .nav-primary ul ul li.active > a{
    background-color: #37649b;
}

/* HOVER STATE */
/* 5) Font color and size change hover state */
.has-dropdown .nav-primary ul ul li.active > a:hover,
.has-dropdown .nav-primary ul ul  a:hover,
.has-dropdown .nav-primary ul ul li.active a,
.has-dropdown .nav-primary ul ul li.active a:hover{
    color: #fff;
    font-size:16px;
}
/* 6) Background color of box hover state */
.has-dropdown .nav-primary ul ul li.active > a:hover,
.has-dropdown .nav-primary ul ul  a:hover{
    background-color: #308294;
}
Copy to clipboard