내가 상상할 수있는 거의 모든 방법으로 스타일을 지정할 수 있도록 nav 메뉴 구조를 설정하려고합니다. 그러나 나는 일할 수없는 한 가지 시나리오를 발견했습니다.불가능한 CSS 탐색 메뉴 레이아웃?
최상위 메뉴는 정렬되지 않은 목록에 별도의 배경색이 설정된 표준 가로 메뉴이며 목록 항목 태그입니다. 하위 메뉴에는 정렬되지 않은 목록 및 목록 항목 태그에 대해 별도의 배경색이 있습니다.
문제는 최상위 메뉴와 하위 메뉴 사이에 간격이 필요하지만 최상위 메뉴 목록 항목에 여분의 아래쪽 패딩을 추가하지 않으면 문제가 발생한다는 것입니다.이 항목은 추가 패딩 최상위 메뉴 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 ▼</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 ►</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
드롭 다운 사이의 간격 및 하위 메뉴가 여전히 수있을 수 있나요 여기
#main-nav
)과 하위 메뉴?
내가 작동하도록하는 방법은 바닥 패딩을 #main-nav > li
으로 확장하는 것입니다. 그러나, 나는 이것을 할 수있는 방법을 볼 수 없었고 #main-nav
배경이 영향을받지 않도록 유지할 수 없었는가?
마찬가지로 하위 메뉴와 하위 하위 메뉴 사이에 간격을두고 하위 메뉴의 배경색을 유지할 수 있습니까? http://codepen.io/dgwyer/pen/emJwQP
정말이 방법처럼 나는 워드 프레스 테마에서이 메뉴를 구현됩니다 난에 사용자 지정 HTML을 추가 할 필요가 없습니다로 기본 메뉴 출력. – dgwyer