Is there a way to have menu hover background color?

Hi there,

Is there a way to have the menu appear like this first image I have attached please? The second image is what I have at the moment

This is the code I have, but I'd like a background colour too. Thank you!
Leo

#menu .ddsmoothmenu li a:hover {
color: yellow;
font-size:13.5px;
font-family: Oswald;
text-decoration: overline underline;
text-transform: uppercase;
}

 

Hey Leo,

Please paste the code given below in Custom CSS section
(Geocraft Settings -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

#menu .ddsmoothmenu li {
padding: 0;
}
#menu .ddsmoothmenu li a {
padding: 10px 15px;
background: #1E1E1E;
margin-top: -2px;
margin-left: -3px;
border-right: 1px solid black;
color:white;
font-size:13.5px;
font-family: Oswald;
text-decoration: overline underline;
text-transform: uppercase;
}
#menu .ddsmoothmenu li:first-child a {
padding-left: 0;
padding-left: 15px;
}
#menu .ddsmoothmenu li:last-child {
margin-left: -1px !important;
}
li.current_page_item a {
background: red !important;
}
#menu .ddsmoothmenu li a:hover {
color: yellow;
}

Thanks,
Praveen

 

Hi Praveen,

Sorry, I meant when you hover over the link that the background changes, not that the background is red all the time. Only when you hover over the link? Thank you!

 

Hey Leo,

Please paste the code given below in Custom CSS section
(Geocraft Settings -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

li.current_page_item a {
background: #1E1E1E !important;
}
 
#menu .ddsmoothmenu li a:hover {
background:red;
}
li.current_page_item a:hover {
background: red !important;
}

Thanks,
Praveen

 

Hi Praveen,

Thank you! That worked well, is there a way to get the second image I have attached? The first is how it currently looks.
Thanks again,
Leo

 

Hey Leo,

Please paste the code given below in Custom CSS section
(Geocraft Settings -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

.menu_wrapper .menu-container {
padding-top: 0;
padding-bottom: 0;
}
#menu .ddsmoothmenu li a {
padding-top: 10px;
padding-bottom: 10px;
margin-left: -6px;
}

Thanks,
Praveen