Hello,

I have a problem with drop-down menu, once I make the top menu image pressed (gray image) the Image goes as well to drop down menu. How can I disable this? So the top menu will stay clickable (gray image) and it will not pass to the drop down menu.




My code:

div#menu1 ul.rMenu li.page-item-2.current_page_item a {
background-image: url(url)!important;
padding-top: 85px;
padding-left: 20px;
background-position: 50% 0%;
background-repeat: no-repeat;
}

I think it's because "!important", but once I delete the image disappears.

I would appreciate your help.

Css is cascading - what ever you do to an rlement will cascade to its children unless there is other more specific css that applies to them.

Juggledad, Thanks for your reply.

Yes there are many codes, here they are:

div#menu1 ul.rMenu li.page-item-2.current_page_item a {
background-image: url[/url]
padding-top: 85px;
padding-left: 20px;
background-position: 50% 0%;
background-repeat: no-repeat;
}

ul.rMenu {
padding-right:285px !important;
list-style:none !important;
margin:0px 0px 0px 0px;

}
ul.rMenu li {
margin:0px 0px 0px 0px !important;
padding: 0px 0px 0px 0px !important;


}
ul.rMenu li a {
margin-right: 0px !important;
padding: 60px 0px 0px 0px !important;
color:#ffffff !important;
font:normal 1.2em Arial !important;
text-decoration:none !important;


}

div#menu1 ul.rMenu li {
background-color: transparent;

}
div#menu1 ul.rMenu {
background-color: transparent;
}

div#menu1 ul.rMenu li:hover > a,
ul.rMenu li a:hover {
color:#B3B5B8 !important;

}


ul.rMenu li.current_page_item a, li.current_page_item{
color: #B3B5B8 !important;


}

#menu1 {
width: 990px !important;
}

div#menu1 {
border-bottom: 0px solid #461D7C;

}
ul.rMenu li:hover,
ul.rMenu li.sfhover
{
background-color: transparent !important;
}
ul.rMenu li.current_page_item>a:link,
ul.rMenu li.current_page_item>a:active,
ul.rMenu li.current_page_item>a:hover,
ul.rMenu li.current_page_item>a:visited,
ul.rMenu li a:hover
{
background-color: transparent !important;
}

ul.rMenu-ver {
margin: 0 !important;
list-style: none !important;
margin-right: 0px !important;
padding-top: 0px !important;
border-top: solid 0px #444444;

}

ul.rMenu-ver li {
margin: 0 !important;
padding: 0 !important;
border-left: solid 0px #f4f4f4 !important;
border-right: solid 0px #f4f4f4 !important;
border-top: solid 0px #f4f4f4 !important;
border-bottom: solid 1px #c5c6c7 !important;

}

ul.rMenu-ver li a {
margin: 0 !important;
padding: 0px !important;
text-align: right;
padding-top: 3px !important;
padding-right: 0px !important;
height: 20px !important;
color: #ffffff !important;
font:normal 1.2em Arial !important;
background: #8a8c8f !important;
border-right: 0px solid #bd3e00 !important;

}

li.rMenu-expand li {
width: 100px !important;
/*height: 23px !important;*/
margin-right: 0px !important;
margin-top: 0px !important;
color: #ffffff !important;
background: #8a8c8f !important;

}


li.rMenu-expand li:hover, .rMenu-expand page_item li:hover {
color: #dddddd !important;
background: #8a8c8f !important;
}

.rMenu-expand page_item li {
width: 100px !important;
height: 23px !important;
margin-right: 0px !important;
margin-top: 0px !important;
color: #dddddd !important;
background: #8a8c8f !important;
}


ul.rMenu ul {
background-color:transparent;

}

div#menu1 ul.sub-menu li:hover > a, div#menu1 ul.sub-menu li a:hover, .rMenu-expand page_item li:hover {
color: #dddddd !important;
background: #8a8c8f !important;

}
ul.rMenu-ver ul {
top: 5px !important;
border-top: 0px solid #bd3e00 !important;
}

div#menu1 ul.rMenu-hor li.rMenu-expand a {
padding-right: 5px !important;

}


.hevra a{
background-image: url
padding-top: 85px;
margin-top: 8px;
padding-left: 20px;
background-position: 40% 0%;
background-repeat: no-repeat;

}


.hevra a:hover{
background-image: url[/url]
padding-top: 85px;
margin-top: 8px;
padding-left: 20px;
background-position: 40% 0%;
background-repeat: no-repeat;

}

Please, please need your help
I know that the problem is really stupid, but I have no idea what it is, all day I'm stuck on it.

I'll try and take a look thursday, but I'm headding off doing family Christmas Eve stuff and will be offline tomorrow.

Thank you. And happy holidays!

back for a few minutes - try this in the CSS Inserts

div#menu1 ul.rMenu li.page-item-2.current_page_item a ul li a {background-image: none;}{

No it did not help, I have tried so many and nothing helps.

Thank you again!

Here is a slight tweak to that code.

div#menu1 ul.rMenu li.page-item-2.current_page_item .sub-menu li a {
    background-image: none !important;
}

Yessss it works!!!! Thank you both, you are the best!
Donation on the way!