불가능한 CSS 탐색 메뉴 레이아웃?

Question

내가 상상할 수있는 거의 모든 방법으로 스타일을 지정할 수 있도록 nav 메뉴 구조를 설정하려고합니다. 그러나 나는 일할 수없는 한 가지 시나리오를 발견했습니다.

최상위 메뉴는 정렬되지 않은 목록에 별도의 배경색이 설정된 표준 가로 메뉴이며 목록 항목 태그입니다. 하위 메뉴에는 정렬되지 않은 목록 및 목록 항목 태그에 대해 별도의 배경색이 있습니다.

문제는 최상위 메뉴와 하위 메뉴 사이에 간격이 필요하지만 최상위 메뉴 목록 항목에 여분의 아래쪽 패딩을 추가하지 않으면 문제가 발생한다는 것입니다.이 항목은 추가 패딩 최상위 메뉴 background-color로 인해 표시되는 정렬되지 않은 목록의 높이에 영향을줍니다.

이제 최상위 메뉴의 배경색을 원하지 않거나 신경 쓰지 않는다면 문제가 없습니다. 그러나 배경색을 유지하고 메뉴가 예상대로 작동하도록 할 수 있습니까?

<nav id="navigation" class="wf-td"> 
    <ul id="main-nav"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About Us</a></li> 
    <li class="menu-item-has-children"> 
     <a href="#">Drop Down &#9660;</a> 
     <ul> 
      <li><a href="#">Sub-item 1</a></li> 
      <li><a href="#">Sub-item 2</a></li> 
      <li><a href="#">Sub-item 3</a></li> 
      <li class="menu-item-has-children"> 
       <a href="#">Sub-item 4 &#9658;</a> 
       <ul> 
       <li><a href="#">Sub-sub-item 1</a></li> 
       <li><a href="#">Sub-sub-item 2</a></li> 
       <li><a href="#">Sub-sub-item 3</a></li> 
       <li><a href="#">Sub-sub-item 4</a></li> 
       <li><a href="#">Sub-sub-item 5</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Sub-item 5</a></li> 
     </ul> 
    </li> 
    <li><a href="#">News</a></li> 
    <li><a href="#">Contact Us</a></li> 
    </ul> 
</nav> 

그리고 CSS :

p { 
    font: normal normal 300 16px/ 26px Helvetica, Arial, Verdana, sans-serif; 
    padding: 0 10px; 
} 

#navigation { 
    background-color: tan; 
    border-radius: 10px; 
    padding: 20px; 
    height:200px; 
} 

nav ul { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    position: relative; 
    display:block; 
    background-color: darkgoldenrod; 
    border-radius: 10px; 
} 

nav ul li a { 
    display: block; 
    margin: 5px; 
    padding:6px 8px; 
    text-decoration:none; 
    font: normal normal 300 17px/ 26px Helvetica, Arial, Verdana, sans-serif; 
    color: #fff; 
    border-radius: 10px; 
    background-color: goldenrod; 
} 

#main-nav > li { 
    display: inline-block; 
    position: relative; 
    z-index: auto; 
    vertical-align: middle; 
    margin-left: 10px; 
    margin-right: 10px; 
    padding: 2px 0; 
    /*padding-bottom: 10px;*/ 
} 

/* Dropdown Styles */ 

nav ul ul { 
    position: absolute; 
    top:60px; 
    left:auto; 
    visibility: hidden; 
    opacity: 0; 
    padding: 10px; 
    background-color: darkgoldenrod; 
    border-radius: 10px; 
} 

nav ul ul ul { 
    position: absolute; 
    top:-18px; 
    left:221px; 
    border-radius: 5px; 
} 

nav li.menu-item-has-children:hover > ul { 
    display: list-item; 
    visibility: visible; 
    opacity: 1; 
} 

nav ul ul li { 
    position: relative; 
    width:190px; 
    line-height: 20px; 
} 

nav ul ul li a { 
    font-size: 15px; 
    border-radius: 5px; 
} 

nav ul ul li a:hover { 
    background-color: tan; 
} 

#main-nav 드롭 다운 사이의 간격 및 하위 메뉴가 여전히 수있을 수 있나요 여기

메뉴 HTML입니다 하위 메뉴 항목 (배경색이 활성화 된 경우 #main-nav)과 하위 메뉴?

내가 작동하도록하는 방법은 바닥 패딩을 #main-nav > li으로 확장하는 것입니다. 그러나, 나는 이것을 할 수있는 방법을 볼 수 없었고 #main-nav 배경이 영향을받지 않도록 유지할 수 없었는가?

마찬가지로 하위 메뉴와 하위 하위 메뉴 사이에 간격을두고 하위 메뉴의 배경색을 유지할 수 있습니까? http://codepen.io/dgwyer/pen/emJwQP

Answer 1

내가 그것을 서브 ul 전에 의사 절대 요소를 사용하여 작동하도록 관리 :

는 여기 메뉴 설정이있다. 60px 상단에있는 메뉴를 유지, 그래서 제대로 배치하고 -10px 정상에 의사를 설정, 그래서 생성 된 공백을 채울 것입니다 것입니다 :

Updated CodePen

nav ul ul:before { 
    display: block; 
    height: 10px; 
    width: 100%; 
    left: 0; 
    top: -10px; 
    position: absolute; 
    content: ""; 
} 

Answer 2

무슨 일이의 것은 그 때 마우스 움직임 이상을 그 간격이 더 이상 li과 접촉하지 않아 :hover 상태가됩니다.

부모가 div이라는 부모와 서브 메뉴 ul을 래핑하여 마우스가 틈 사이를 이동할 때 기술적으로 여전히 li 안에 들어가 메뉴가 계속 표시되도록 할 수 있습니다.

p { 
 
    font: normal normal 300 16px/ 26px Helvetica, Arial, Verdana, sans-serif; 
 
    padding: 0 10px; 
 
} 
 

 
#navigation { 
 
\t background-color: tan; 
 
\t border-radius: 10px; 
 
\t padding: 20px; 
 
    height:200px; 
 
} 
 

 
nav ul { 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t list-style: none; 
 
\t position: relative; 
 
\t display:block; 
 
\t background-color: darkgoldenrod; 
 
\t border-radius: 10px; 
 
} 
 

 
nav ul li a { 
 
\t display: block; 
 
\t margin: 5px; 
 
\t padding:6px 8px; 
 
\t text-decoration:none; 
 
\t font: normal normal 300 17px/ 26px Helvetica, Arial, Verdana, sans-serif; 
 
\t color: #fff; 
 
\t border-radius: 10px; 
 
\t background-color: goldenrod; 
 
} 
 

 
#main-nav > li { 
 
\t display: inline-block; 
 
\t position: relative; 
 
\t z-index: auto; 
 
\t vertical-align: middle; 
 
\t margin-left: 10px; 
 
\t margin-right: 10px; 
 
    padding: 2px 0; 
 
    /*padding-bottom: 10px;*/ 
 
} 
 

 
/* Dropdown Styles */ 
 

 
nav li.menu-item-has-children { 
 
    position: relative; 
 
} 
 
nav li.menu-item-has-children > div { 
 
    display: none; 
 
    padding-top: 10px; 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 0; 
 
} 
 
nav li.menu-item-has-children:hover > div { 
 
    display: block; 
 
} 
 
nav li.menu-item-has-children > div li div { 
 
    display: none; 
 
    position: absolute; 
 
\t top: -18px; 
 
\t left: 190px; 
 
    padding-left: 20px; 
 
} 
 
nav li.menu-item-has-children > div li:hover div { 
 
    display: block; 
 
} 
 

 
nav ul ul { 
 
\t padding: 10px; 
 
\t background-color: darkgoldenrod; 
 
\t border-radius: 10px; 
 
} 
 
nav ul ul li { 
 
\t position: relative; 
 
\t width:190px; 
 
\t line-height: 20px; 
 
} 
 

 
nav ul ul li a { 
 
\t font-size: 15px; 
 
\t border-radius: 5px; 
 
} 
 

 
nav ul ul li a:hover { 
 
\t background-color: tan; 
 
}

<nav id="navigation" class="wf-td"> 
 
    <ul id="main-nav"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">About Us</a></li> 
 
    <li class="menu-item-has-children"> 
 
     <a href="#">Drop Down &#9660;</a> 
 
     <div class="test"> 
 
      <ul> 
 
      <li><a href="#">Sub-item 1</a></li> 
 
      <li><a href="#">Sub-item 2</a></li> 
 
      <li><a href="#">Sub-item 3</a></li> 
 
      <li class="menu-item-has-children"> 
 
       <a href="#">Sub-item 4 &#9658;</a> 
 
       <div> 
 
        <ul> 
 
        <li><a href="#">Sub-sub-item 1</a></li> 
 
        <li><a href="#">Sub-sub-item 2</a></li> 
 
        <li><a href="#">Sub-sub-item 3</a></li> 
 
        <li><a href="#">Sub-sub-item 4</a></li> 
 
        <li><a href="#">Sub-sub-item 5</a></li> 
 
        </ul> 
 
       </div> 
 
      </li> 
 
      <li><a href="#">Sub-item 5</a></li> 
 
      </ul> 
 
     </div> 
 
    </li> 
 
    <li><a href="#">News</a></li> 
 
    <li><a href="#">Contact Us</a></li> 
 
    </ul> 
 
</nav> 
 

 
<p>Is it possible to have a gap between the drop down <code>#main-nav</code> and the sub-menu and still be able to select the sub-menu items (when a background color is enabled on <code>#main-nav</code>) and the sub-menu?</p> 
 

 
<p>The ony way I got this to work is to extend the bottom padding on <code>#main-nav > li</code>. However, I couldn't see a way to do this and keep the <code>#main-nav</code> background from being affected?</p> 
 

 
<p>By the same token is it possible to have a gap between the sub-menu and sub-sub-menu and retain the background color on the sub-menus?</p>

예 :http://codepen.io/anon/pen/MYyWwv