charlie charlie - 2 months ago 20
CSS Question

CSS menu overlapping another menu

I am using Wordpress for my website and in one of the template files i have added my own menu (see fiddle)

https://jsfiddle.net/bxdm4kye/

I am having an issue with the main wordpress menu now which overlaps my menu. If you take a look at this screen shot (https://s13.postimg.org/e1v9vqp2v/Screen_Shot_2016_09_12_at_18_04_04.png) you can see the WP menu is displaying a line through the dropdowns however this stops when i remove my menu

I added

z-index:999
to
#menu-product-categories > li {
on my menu as before i added this i could not hover or select the elements in my menu

how can i now prevent the line from display in the WP menu dropdown?

Answer

Here is the solution. Please change the colors like you want to have. Hover the Switches item to see the effect.

See also on JSFiddle

.menu-product-categories-container {
	display:block;
	width:100%;
	height:60px;
	background:#F36F25;
}
#menu-product-categories {
	list-style: none;
	padding: 0;
	margin: 0;
	text-align:center;
	height:100%;
    z-index: 0;
}
#menu-product-categories > li {
	display: inline-block;
	z-index:9999;
    position:relative;
	padding:21px 8px;
 	text-decoration:none;
}
#menu-product-categories li > a {
    display: block;
    color:#F36F25;
}
#menu-product-categories > li:hover {
	background:#FFFFFF;
	color:#F36F25;
}
#menu-product-categories > li > a:hover {
	color:inherit;
}
#menu-product-categories ul.sub-menu {
    list-style: none;
	padding: 0;
	margin: 0;
	text-align:center;
	display:none;
	width:200px;
	position:absolute;
	z-index:1;
	left:0;
	top:40px;
    background: #FFFFFF;
}
#menu-product-categories li:hover ul.sub-menu {
	display: block;
	max-height: 200px;
	background: #FFFFFF;
}
#menu-product-categories ul.sub-menu li {
	color:#FFFFFF;
	padding:5px;
}
#menu-product-categories ul.sub-menu li:hover {
	color:#F36F25;
	background:#000000;
	float:none;
	padding:5px;
}
<div class="menu-product-categories-container">
<ul id="menu-product-categories" class="menu">
    <li id="menu-item-2933" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat current-menu-item menu-item-2933"><a href="/shop/product-category/desk-phones/">Desk Phones</a></li>
    <li id="menu-item-2934" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-2934"><a href="/shop/product-category/headsets/">Headsets</a></li>
    <li id="menu-item-2931" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-2931"><a href="/shop/product-category/conference-phones/">Conference Phones</a></li>
    <li id="menu-item-2932" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-2932"><a href="/shop/product-category/dect-phones/">Dect Phones</a></li>
    <li id="menu-item-2935" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-2935"><a href="/shop/product-category/routers/">Routers</a></li>
    <li id="menu-item-2936" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-2936"><a href="/shop/product-category/switches/">Switches</a>
        <ul class="sub-menu">
            <li><a href="#">Dropdown 1</a></li>
            <li><a href="#">Dropdown 2</a></li>
            <li><a href="#">Dropdown 3</a></li>
            <li><a href="#">Dropdown 4</a></li>
        </ul>
    </li>
    <li id="menu-item-2930" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-2930"><a href="/shop/product-category/cctv/">CCTV</a></li>
</ul>
</div>

Comments