меню CSS перекрывающихся другое меню

Question

Я использую Wordpress для моего сайта и в одном из файлов шаблонов я добавил свое собственное меню (см скрипку)

https://jsfiddle.net/bxdm4kye/

У меня возникли проблемы с главным 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 { 
 
\t display:block; 
 
\t width:100%; 
 
\t height:60px; 
 
\t background:#F36F25; 
 
} 
 
#menu-product-categories { 
 
\t list-style: none; 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t text-align:center; 
 
\t height:100%; 
 
    z-index: 0; 
 
} 
 
#menu-product-categories > li { 
 
\t display: inline-block; 
 
\t z-index:9999; 
 
    position:relative; 
 
\t padding:21px 8px; 
 
    \t text-decoration:none; 
 
} 
 
#menu-product-categories li > a { 
 
    display: block; 
 
    color:#F36F25; 
 
} 
 
#menu-product-categories > li:hover { 
 
\t background:#FFFFFF; 
 
\t color:#F36F25; 
 
} 
 
#menu-product-categories > li > a:hover { 
 
\t color:inherit; 
 
} 
 
#menu-product-categories ul.sub-menu { 
 
    list-style: none; 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t text-align:center; 
 
\t display:none; 
 
\t width:200px; 
 
\t position:absolute; 
 
\t z-index:1; 
 
\t left:0; 
 
\t top:40px; 
 
    background: #FFFFFF; 
 
} 
 
#menu-product-categories li:hover ul.sub-menu { 
 
\t display: block; 
 
\t max-height: 200px; 
 
\t background: #FFFFFF; 
 
} 
 
#menu-product-categories ul.sub-menu li { 
 
\t color:#FFFFFF; 
 
\t padding:5px; 
 
} 
 
#menu-product-categories ul.sub-menu li:hover { 
 
\t color:#F36F25; 
 
\t background:#000000; 
 
\t float:none; 
 
\t 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>