CSS-Menü ein anderes Menü überlappende

Question

ich Wordpress verwende für meine Website und in einer der Vorlagendateien ich mein eigenes Menü hinzugefügt haben (siehe Geige)

https://jsfiddle.net/bxdm4kye/

ich mit dem Hauptwordpress ein Problem habe Menü jetzt, das mein Menü überlappt. Wenn Sie einen Blick auf diesen Screenshot (https://s13.postimg.org/e1v9vqp2v/Screen_Shot_2016_09_12_at_18_04_04.png) nehmen Sie die WP-Menü sehen, ist eine Linie durch die Dropdown-Menüs die Anzeige jedoch diese stoppt, wenn ich mein Menü entfernen

ich z-index:999-#menu-product-categories > li { auf meinem Menü hinzugefügt, wie, bevor ich diese hinzugefügt Ich konnte nicht schweben oder die Elemente in meinem Menü auswählen

Wie kann ich jetzt verhindern, dass die Linie im Dropdown-Menü des WP-Menüs angezeigt wird?

Answer 1

Hier ist die Lösung. Bitte ändern Sie die Farben wie Sie möchten. Bewegen Sie den Schalter, um den Effekt zu sehen.

Siehe auch auf 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>