Проблемы с раскрывающимся меню WordPress

Question

По какой-то причине мое меню, созданное в WordPress, вызывает некоторые проблемы, когда я пытаюсь отобразить раскрывающийся список. Элемент родительского меню становится полным, а затем охватывает другие элементы. Это то, что он выглядит на парения состояние:

Вот скрипку с кодом: https://jsfiddle.net/j55scjeq/

Здесь КСС:

 /* 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: relative в position : 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

вам нужно сделать #nav уль Ли положение относительно держать ниспадающее меню вокруг области связи

и #nav уль Ли: парить> уль [изменяя положение от абсолютного до относительного является основным продуктом]

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