Moritz Moritz - 2 months ago 16
CSS Question

sub UL class (CSS styling)

I ran into a problem with CSS and can't solve it. Currently I try to rework my page (http://backlight.around-the-globe.info/) and would like to style the dropdown menu on the top. My goal is to make the flyout transparent and leave the rest at it is (Africa should be white, Hurghada semi-transparent). . This is what I've got so far but it makes the whole nav bar transparent.

nav ul, nav li, .page__tray ul.menu-item-has-children li {
background-color: rgba( 255, 255, 255, 0 );
}

.menu-item-has-children ul.sub-menu li {
background-color: rgba( 255, 255, 255, 0 );
}


I know this code is wrong but I don't get the right solution.

Answer

So looking at your issue following solution should work:

You need to include the below CSS:

.primary-menu { background:white; }

Changed Opacity value from 0 to 0.67 giving it a semi-transparent look:

.menu-item-has-children ul.sub-menu li {
    background-color: rgba(255, 255, 255, 0.67);
}