Submenu

Hello

Is it possible to change or hide submenu hover color in my style.css.
I tried this

#mainnav .sub-menu li:hover > a {
color: #fff;
background-color: #000;
}

With no result.

Please help me.

Kindly Regards
Peter Becht

Dear Peter,

That code looks correct. Common problem preventing new code addition from working is invalid CSS code which precedes it. The easiest way to check it is to go to CSS validator tool https://jigsaw.w3.org/css-validator/#validate_by_input. A site caching is possible to be the source of this problem as well. It typically won’t read the changes unless you cleared the cache.

I hope this reply helps.

Regards,
Kharis

Dear Kharis

There where a few faults that I changed - likewise purged the site.
I made other changes in submenu as fonts etc al in style.css _and it works - but to change hover background color in submenu _ dont work. I want it transparant so i tried this
}
#mainnav .sub-menu li:hover > a {
color: #fff;
background-color: transparent !important;
}

It dont work se my site http://www.becht.dk/

Please help me.

Hello there,

Could you please share the group of custom CSS code you added? I’d like to check whether invalid CSS code remains.

Regards,
Kharis

Hi Kharis

Encolse the hole style for header _ my changes is in font family, fontsize and submeny both menu, submenu and titel

Hope you can find the problem.

Kindly regards

}
/--------------------------------------------------------------
Header
--------------------------------------------------------------
/
.site-title {
font-size: 32px;
line-height: 1.2;
}
.site-title a,
.site-title a:hover {
color: #fff;
}
.site-logo {
max-height: 100px;
}
.site-header {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background-color: transparent;
padding: 20px 0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.admin-bar .site-header,
.admin-bar .site-header.float-header {
top: 32px;
}
.admin-bar.no-hero .site-header.fixed,
.admin-bar.no-hero .site-header.float-header.fixed {
top: 32px !important;
}
.no-hero .site-header.fixed {
top: 0 !important;
}
.header-image {
display: none;
position: relative;
height: 300px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.header-inner {
display: none;
}
.single-header-image {
display: block;
}
.site-title {
margin: 0;
}
.site-description {
font-size: 16px;
margin: 15px 0 0;
line-height: 1.6;
color: #efefef;
}
.site-header.fixed {
position: fixed;
}

.site-header .col-md-4,
.site-header .col-md-8 {
	min-height: 0;
}

.site-header .logo {
	margin: 40px 0;
	float: left;
	-webkit-transition: all 0.3s linear;
	   -moz-transition: all 0.3s linear;
	    -ms-transition: all 0.3s linear;
	     -o-transition: all 0.3s linear;
	        transition: all 0.3s linear;
}

.site-header .logo a {
	display: block;
	height: 100%;
}

.site-header .logo {
	width: 135px;
	height: 27px;
}

.site-header.float-header {
	background-color: rgba(0,0,0,0.9);
	padding: 5px;
}
.site-header.float-header #mainnav {
	padding: 0;
}

.site-header.float-header #mainnav > ul > li > a {
    height: 70px;
    line-height: 70px;
}

.site-header.float-header .logo {
    margin: 20px 0;
}
/* navigation */
#mainnav {
	display: block;
	float: right;
	-webkit-transition: all 0.3s linear;
	   -moz-transition: all 0.3s linear;
	    -ms-transition: all 0.3s linear;
	     -o-transition: all 0.3s linear;
	        transition: all 0.3s linear;
}
#mainnav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#mainnav li {
	float: left;
	padding: 0 14px;
}
#mainnav ul ul li {
	padding: 0;
}	
#mainnav ul li a {
	position: relative;
	display: block;
	font-size: 14px;
	font-family: "Orbitron", sans-serif;
	color: #fff;
	font-weight: 500;
	text-decoration: none;
	outline: none;
}
#mainnav ul li a:hover {
	color: #d65050;
}
#mainnav ul ul a {
	width: 180px;
	font-family: "Orbitron", sans-serif !important;
}
#mainnav > ul > li:last-child {
	padding-right: 0;
}
#mainnav ul li {
	position: relative;
}
#mainnav ul li ul {
	width: 180px;
	position: absolute;
	top: 100%;
	left: initial; 
	opacity: 0;
	visibility: hidden;
	-webkit-border-radius: 0 0 2px 2px;
	   -moz-border-radius: 0 0 2px 2px;
		 -o-border-radius: 0 0 2px 2px;
			border-radius: 0 0 2px 2px;
    -webkit-transition: all 0.3s ease;
       -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
         -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
}
#mainnav ul li ul ul {
	top: 0;
}
#mainnav ul li ul:after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
}
#mainnav ul li ul ul:after {
	top: 0;
}
#mainnav ul li ul li ul {
	left: 100%;
}
#mainnav ul {
	padding: 0;
}
#mainnav li:hover > ul {
    opacity: 1;
    padding-top: 10px;
    margin: 0;
    visibility: visible;
    left: auto;
    display: block !important;
    -webkit-transition: all 0.3s ease;
       -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
         -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
}
#mainnav li:hover > ul ul {
	padding-top: 0;
	left: 100%;
}
#mainnav .sub-menu {
	z-index: 99999;
}
#mainnav .sub-menu li a {
            font-size: 14px !important;
    }
	color: #fff;
	display: block;
	line-height: 30px;
	background: #1c1c1c;
	padding: 0 18px;
	border-top: 1px solid #252525;
    -webkit-transition: all 0.3s ease;
       -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
         -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
}
#mainnav .sub-menu li:hover > a {
	color: #fff;
            background: transparent;
}
#mainnav li:hover > .sub-menu > li > a {
	padding: 8px 18px;
}
/* Icons */
#mainnav ul li::before {
	font-family: "Orbitron", sans-serif;
	color: #fff;
	float: left;
	margin: 5px 5px 0 0;
	font-size: 14px;
	line-height: 1;
	font-weight: 400;
}
#mainnav ul li a {
	float: left;
}
#mainnav .sub-menu li:before {
	content: '';
	margin: 0;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
}	
#mainnav-mobi ul li a {
	float: none;
}
#mainnav-mobi ul li::before {
	content: '';
}

Hello there,

I fixed one error found. Please replace the header CSS rules with this:

https://gist.githubusercontent.com/kharissulistiyo/f5aca9de0acc6610c342ea1c03470249/raw/cea832a817a5c70601a345226b747c8770076fa7/style.css

Regards,
Kharis

Thanks again Kharis

It went ok but how do I hide the background color in submenu both in display and hover_ i tried transparent but it dosent seem to work.

Kindly Regards
Peter

Hi Kharis

I think I solved it like this

http://www.becht.dk/

by doing like this
}
#mainnav .sub-menu li a {
font-size: 14px !important;
color: #fff;
display: block;
line-height: 30px;
background: transparent;
padding: 0 18px;
border-top: 1px solid #252525;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#mainnav .sub-menu li:hover > a {
color: #c60000;
background: none !important;
}

Thanks a lot

Regards Peter

Great! You resolved it.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis