如何將sub-nav ul從main-nav ul中移出？

Question

我有一個CMS生成的主菜單和一個子菜單。這兩個菜單都是標準的ul標籤，帶有一個「navCMSListMenuUL」類，然後在我的CSS中相應地設置樣式。問題是，在a：hover上，容器展開以適應新顯示的子導航。

我希望子導航到容器的外面，並在比容器下面的任何元素更高的z-index流動。我還想在這個導航欄中清理一些其他的東西，但這些都是輔助導航流程的輔助。我在Codepen @http://codepen.io/patrickTheWizard/pen/ZGWKYX中創建了一個簡化的測試用例。

<nav class="navigation"> 
<ul id="menuElem" class="navCMSListMenuUL"> 
    <li class="navCMSListMenuLI"> 
     <a class="navCMSListMenuLink" href="#">Home</a> 
    </li> 
    <li class="navCMSListMenuLI"> 
     <a class="navCMSListMenuLink" href="#">About Us</a> 
    </li> 
    <li class="navCMSListMenuLI"> 
     <a class="navCMSListMenuLink" href="#">Calendar</a> 
    </li> 
    <li class="navCMSListMenuHighlightedLI noseparator"> 
     <a class="navCMSListMenuLinkHighlighted" href="#">Members</a> 
     <ul class="navCMSListMenuUL"> 
      <li class="navCMSListMenuLI"> 
       <a class="navCMSListMenuLink" href="#">Become a Member</a> 
      </li> 
      <li class="navCMSListMenuLI"> 
       <a class="navCMSListMenuLink" href="#">Board Meetings</a> 
      </li> 
      <li class="navCMSListMenuLI"> 
       <a class="navCMSListMenuLink" href="#">Committees</a> 
      </li> 
      <li class="navCMSListMenuLI"> 
       <a class="navCMSListMenuLink" href="#">Current Members</a> 
      </li> 
      <li class="navCMSListMenuLI"> 
       <a class="navCMSListMenuLink" href="#">Member Benefits</a> 
      </li> 
      <li class="navCMSListMenuLI noseparator"> 
       <a class="navCMSListMenuLink" href="#">Statistics &amp; Data</a> 
      </li> 

     </ul> 
    </li> 

</ul> 

/* #01-Header/Nav# */ 
nav.navigation { 
    clear: both; 
    /* background-color: #3c3c3c; */ 
    overflow: visible; 
    /* padding: 15px; */ 
    /* border-top: 6px solid #2a8cec; */ 
    /* margin-bottom: 30px; */ 
} 

ul#menuElem { 
    text-align: center; 
    background-color: #3c3c3c; 
    border-top: 6px solid #2a8cec; 
    margin-bottom: 30px; 
} 

ul#menuElem li { 
    display: inline-block; 
    margin: 16px 0 15px 0; 
} 

ul#menuElem a { 
    color: #fff; 
    text-decoration: none; 
    padding: 15px 35px; 
    font-weight: 600; 
    text-transform: uppercase; 
    border-right: 1px solid; 
    margin: 15px 0; 
    margin-left: -4px; 
} 

ul#menuElem a:hover { 
    background-color: #2a8cec; 
} 

ul#menuElem li ul { 
    display: none; 
    width: 100%; 
    float: left; 
} 

ul#menuElem li:hover ul { 
    display: block; 
} 

ul#menuElem ul li { 
    display: block; 
} 

Answer 1

OK，你在做菜單式的代碼時，你將有風格，互相覆蓋（多個嵌套UL，李一）。

將「>」元素包含在樣式表中是一種很好的做法，這會將查詢的範圍限制爲直接的子元素。

我編輯了一下你的代碼，主要是通過引入直接子規則（>）。我也讓子菜單絕對定位到它的父級，這意味着你不會讓子菜單推動你的主菜單變大。

Here is your code pen.

，代碼：

/* #01-Header/Nav# */ 
nav.navigation { 
    clear: both; 
    /* background-color: #3c3c3c; */ 
    overflow: visible; 
    /* padding: 15px; */ 
    /* border-top: 6px solid #2a8cec; */ 
    /* margin-bottom: 30px; */ 
} 

ul#menuElem { 
    text-align: center; 
    background-color: #3c3c3c; 
    border-top: 6px solid #2a8cec; 
    margin-bottom: 30px; 
} 

ul#menuElem > li { 
    display: inline-block; 
    position: relative; 
    margin: 16px 0 15px 0; 
} 

ul#menuElem > li > a { 
    color: #fff; 
    text-decoration: none; 
    padding: 15px 35px; 
    font-weight: 600; 
    text-transform: uppercase; 
    border-right: 1px solid; 
    margin: 15px 0; 
    margin-left: -4px; 
} 

ul#menuElem > li > a:hover { 
    background-color: #2a8cec; 
} 

ul#menuElem > li > ul { 
    display: none; 
    width: 100%; 
    float: left; 
} 

ul#menuElem > li:hover ul { 
    display: block; 
    top: 30px; 
    right: 0px; 
    position: absolute; 
    background: #FFF; 
    padding: 0px; 
    margin: 0px; 
} 

ul#menuElem > li:hover > ul > li{ 
    margin: 0px; 
    padding: 0px; 
    list-style: none; 
    text-align: left; 
    padding: 5px; 
    line-height: 30px; 
    border-bottom: solid 1px #dedede; 
} 

ul#menuElem > li:hover > ul > li > a{ 
    text-decoration: none; 
    color: inherit; 
} 

ul#menuElem > li:hover > ul > li:hover { 
    background: #000; 
    color: #FFF; 
} 

ul#menuElem > ul > li { 
    display: block; 
}