Question

我在我的网站上使用Wordpress，并在其中一个模板文件中添加了我自己的菜单（参见小提琴）

我现在遇到主要的wordpress菜单问题，它与我的菜单重叠。如果您看一下这个屏幕截图（https://s13.postimg.org/e1v9vqp2v/Screen_Shot_2016_09_12_at_18_04_04.png），您可以看到WP菜单在下拉列表中显示一条线，但是当我删除菜单时这会停止

我在菜单上添加了z-index:999至#menu-product-categories > li {，因为之前我添加了这个我无法悬停或选择菜单中的元素

我现在怎么能阻止在WP菜单下拉列表中显示该行？

Answer 1

这是解决方案。请改变你想要的颜色。将“开关”项目悬停在其中以查看效果。

另见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>

CSS菜单与另一个菜单

1 个答案: