WordPressドロップダウンメニューの問題

Question

ドロップダウンを表示しようとすると何らかの理由でWordPressの生成メニューで問題が発生しています。親メニュー項目は全幅になり、他の項目をカバーします。これは、ホバー状態で次のようになります。ここでは

は、コードとフィドルである：ここではhttps://jsfiddle.net/j55scjeq/

はCSSです：

 /* Navigation */ 

     #nav { 
      margin: 100px 0; 
      background-color: #E64A19; 
      z-index: 999; 
      overflow: visible; 
     } 

     /* Removing padding, margin and "list-style" from the "ul", 
     * and adding "position:reltive" */ 
     #nav ul { 
      padding:0; 
      margin:0; 
      list-style: none; 
      position: relative; 
      z-index:; 
      } 

     /* Positioning the navigation items inline */ 
     #nav ul li { 
      margin: 0px -7px 0 0; 
      display:inline-block; 
      background-color: #E64A19; 
      max-width: 200px; 
      } 

     /* Styling the links */ 
     #nav a { 
      display:block; 
      padding:0 10px; 
      color:#FFF; 
      font-size:20px; 
      line-height: 60px; 
      text-decoration:none; 
     } 

     /* Background color change on Hover */ 
     #nav a:hover { 
      background-color: #000000; 
     } 
     #nav ul li ul { 
      display: none; 
      position: absolute; 
      top: 50px; 
      z-index: 99; 
     } 

     /* Display Dropdowns on Hover */ 
     #nav ul li:hover > ul { 
      display:block; 
      position: relative; 
      z-index: 99; 
     } 


     /* Fisrt Tier Dropdown */ 
     #nav ul ul li { 
      max-width:450px; 
      display: block; 
      position: relative; 
      z-index: 99; 
     } 

、ここではHTMLです。

<nav id="nav"><div class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-5164" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-5164"><a href="#">Home</a></li> 
     <li id="menu-item-2787" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2756 current_page_item menu-item-has-children menu-item-2787"><a href="#">Portfolio</a> 
     <ul class="sub-menu"> 
      <li id="menu-item-4602" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4602"><a href="#">Link one</a></li> 
      <li id="menu-item-5628" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5628"><a href="#">Link two</a></li> 
      <li id="menu-item-1023" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1023"><a href="#">Link three</a></li> 
      <li id="menu-item-363" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-363"><a href="#">Link four</a></li> 
      <li id="menu-item-1022" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1022"><a href="#">Link five</a></li> 
      <li id="menu-item-362" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-362"><a href="#">Link six</a></li> 
     </ul> 
     </li> 
     <li id="menu-item-356" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-356"><a href="#">About</a> 
     <ul class="sub-menu"> 
      <li id="menu-item-5709" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5709"><a href="#">Another Link 1</a></li> 
      <li id="menu-item-358" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-358"><a href="#">Another Link 2</a></li> 
      <li id="menu-item-4883" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4883"><a href="#">Another Link 3</a></li> 
      <li id="menu-item-835" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-835"><a href="#">Another Link 4</a></li> 
     </ul> 
     </li> 
     <li id="menu-item-364" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-364"><a href="#">Our clients</a> 
     <ul class="sub-menu"> 
      <li id="menu-item-4709" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4709"><a href="#">Case Studies</a></li> 
     </ul> 
     </li> 
     <li id="menu-item-357" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-357"><a href="#">Blog</a></li> 
     <li id="menu-item-360" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-360"><a href="#">Contact</a></li> 
     </ul></div></nav> 

誰かがソリューション。子供のULがすばらしい欄に表示され、その下にコンテンツが重なり合っているのが好きです。

私はこれを理解できません。私はHTMLかCSSの問題かどうかはわかりません。 ：/

非常に高く評価されています。

Answer 1

あなただけposition: relativeposition : absoluteに設定する必要があります - これを試してみて、すべての問題なら、私に知らせて

/* Display Dropdowns on Hover */ 
#nav ul li:hover > ul { 
    display:block; 
    position: absolute; /*Or you can simply remove it as you have already declared its position: absolute at #nav ul li ul */ 
    z-index: 99; 
} 

を。

JSFiddelからhttps://jsfiddle.net/j55scjeq/2/

Answer 2

あなたは

リンク領域の周りにドロップダウンメニューを維持し、UL李#navする#navのULのli位置決め相対を行う必要があります。ホバーを> ULは、[変更絶対位置から相対位置への位置が主なプロンプトです。

Edite : https://jsfiddle.net/j55scjeq/3/