드롭 다운 메뉴와 하위 메뉴 사이의 간격

Question

메뉴 하위 메뉴가 메뉴 아래에 10 개씩 표시되도록하고 싶습니다. ul에서 여백 - 위쪽을 사용하여이를 달성 할 수 있지만 하위 메뉴로 내 마우스를 이동할 수 없습니다. 메뉴가 있습니다. 이 게시물은 매우 유사하지만 답변을 추출 할 수 없습니다. 이 하나

Space between menu and drop down menu

deepMenu { 
 
    background: black !important; 
 
    margin-left: 100px !important; 
 
    position: absolute !important; 
 
} 
 
.lmao li ul { 
 
    display: none; 
 
    position: absolute; 
 
    border-top: 5px solid black; 
 
    margin-top: 18px; 
 
} 
 
.lmao li ul li { 
 
    display: none; 
 
    border-top: 0.1px solid #F2F2F2; 
 
    padding: 10px 40px 10px 10px; 
 
    margin: 0; 
 
    position: relative; 
 
    z-index: 9999999; 
 
    background: white; 
 
    font-size: 8pt; 
 
    line-height: 24px; 
 
    text-align: left; 
 
} 
 
.lmao li:hover > ul, 
 
.lmao li:hover > ul li { 
 
    display: block; 
 
}

<ul class="lmao"> 
 
    <li class="point1"><a href="index.html">home</a> 
 
    <ul> 
 
     <li><a href="#">Sub Menu 1</a></li> 
 
     <li><a href="#">Sub Menu 2 long lel</a></li> 
 
     <li><a href="#">Sub Menu 3 really bare long mad</a></li> 
 
     <li><a href="#">Sub Menu 4 dvg</a></li> 
 
    </ul> 
 

 
    <li class="point"><a href="index.html">features</a> 
 
     <ul> 
 
     <li><a href="#">sdfgsdfgsdfgsdfgsdfgsdfg</a></li> 
 
     <li><a href="#">sdfg</a></li> 
 
     <li><a href="#">sdfgsdfgsdfgsdfg</a></li> 
 
     <li><a href="#">sdfgsdfgsdfgsdfgsdfg</a></li> 
 
     </ul> 
 

 
     <li class="point layout"><a href="#">Layouts</a> 
 
     <ul> 
 
      <li><a href="#">sfdgsdfgsdfgsdfgsdfgdfgsdgsdf</a></li> 
 
      <li><a href="#">sfdgsdfgsdfgl</a></li> 
 
      <li><a href="#">dfsgsdfgsdfgsdfgsdfgsdfgsdfg</a></li> 
 
      <li class="arrow"><a href="#">sfgsdfg</a> 
 
      <ul class="deepMenu"> 
 
       <li><a href="#">Deep Menu 1</a> 
 
       <ul> 
 
        <li><a href="#">Sub Deep 1</a></li> 
 
        <li><a href="#">Sub Deep 2</a></li> 
 
        <li><a href="#">Sub Deep 3</a></li> 
 
        <li><a href="#">Sub Deep 4</a></li> 
 
       </ul> 
 
       </li> 
 
       <li><a href="#">Deep Menu 2</a></li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </li> 
 

 
     <li class="point"><a href="index.html">pages</a></li> 
 
     <li class="point"><a href="index.html">light version</a></li> 
 
</ul>

Answer 1

UPDATE처럼 : 당신이 참조를 준 지금

, 호버 메뉴는 리튬 자체에서 실제로 먼 아니지만, 위치 지정된입니다 그것 바로 아래에. 예제 사이트에서 li은 내부 텍스트보다 큰 높이를 가지며 position : relative를가집니다. 그 위에.

드롭 다운을 트리거하는 텍스트에서 멀리 떨어져있는 top: 100%;이있는 더 큰 <li> 요소 바로 아래의 드롭 다운이 절대 위치합니다.

업데이트 된 내용으로 업데이트 된 코드 조각을 확인하십시오.

---

여백은 '호버 블 가능'이 아니므로 호버 선택기가 트리거되지 않습니다. 'hoverable'인 동안 먼 거리를 유지하는 한 가지 방법은 여백 대신 padding을 사용하는 것입니다.

.lmao li ul을 변경하면 CSS 우수 사례로 태그에 스타일을 추가하는 것을 권장하지 않지만 일반적으로 BEM, SMACSS 등과 같은 CSS 명명 규칙을 채택합니다.

/* Reset the ul style */ 
 
ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
deepMenu { 
 
    background: black !important; 
 
    margin-left: 100px !important; 
 
    position: absolute !important; 
 
} 
 

 
.lmao { 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
.lmao li { 
 
    display: inline-block; 
 
    background-color: white; 
 
    padding: 15px; 
 
    position: relative; 
 
    padding: 20px; 
 
} 
 

 
.lmao li a { 
 
    text-decoration: none; 
 
    color: black; 
 
} 
 

 
.lmao li a:hover { 
 
    text-decoration: none; 
 
    color: #f38763; 
 
} 
 

 
.lmao li ul { 
 
    display: none; 
 
    position: absolute; 
 
    border-top: 5px solid black; 
 
    top: 100%; 
 
    min-width: 200px; 
 
} 
 

 
.lmao li ul li { 
 
    display: none; 
 
    border-top: 0.1px solid #F2F2F2; 
 
    padding: 10px 40px 10px 10px; 
 
    margin: 0; 
 
    position: relative; 
 
    z-index: 9999999; 
 
    background: white; 
 
    font-size: 8pt; 
 
    line-height: 24px; 
 
    text-align: left; 
 
} 
 
.lmao li:hover > ul, 
 
.lmao li:hover > ul li { 
 
    display: block; 
 
}

<ul class="lmao"> 
 
    <li class="point1"><a href="index.html">home</a> 
 
    <ul> 
 
     <li><a href="#">Sub Menu 1</a> 
 
     </li> 
 
     <li><a href="#">Sub Menu 2 long lel</a> 
 
     </li> 
 
     <li><a href="#">Sub Menu 3 really bare long mad</a> 
 
     </li> 
 
     <li><a href="#">Sub Menu 4 dvg</a> 
 
     </li> 
 
    </ul> 
 

 
    <li class="point"><a href="index.html">features</a> 
 
     <ul> 
 
     <li><a href="#">sdfgsdfgsdfgsdfgsdfgsdfg</a> 
 
     </li> 
 
     <li><a href="#">sdfg</a> 
 
     </li> 
 
     <li><a href="#">sdfgsdfgsdfgsdfg</a> 
 
     </li> 
 
     <li><a href="#">sdfgsdfgsdfgsdfgsdfg</a> 
 
     </li> 
 
     </ul> 
 

 
     <li class="point layout"><a href="#">Layouts</a> 
 
     <ul> 
 
      <li><a href="#">sfdgsdfgsdfgsdfgsdfgdfgsdgsdf</a> 
 
      </li> 
 
      <li><a href="#">sfdgsdfgsdfgl</a> 
 
      </li> 
 
      <li><a href="#">dfsgsdfgsdfgsdfgsdfgsdfgsdfg</a> 
 
      </li> 
 
      <li class="arrow"><a href="#">sfgsdfg</a> 
 
      <ul class="deepMenu"> 
 
       <li><a href="#">Deep Menu 1</a> 
 
       <ul> 
 
        <li><a href="#">Sub Deep 1</a> 
 
        </li> 
 
        <li><a href="#">Sub Deep 2</a> 
 
        </li> 
 
        <li><a href="#">Sub Deep 3</a> 
 
        </li> 
 
        <li><a href="#">Sub Deep 4</a> 
 
        </li> 
 
       </ul> 
 
       </li> 
 
       <li><a href="#">Deep Menu 2</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </li> 
 

 
     <li class="point"><a href="index.html">pages</a> 
 
     </li> 
 
     <li class="point"><a href="index.html">light version</a> 
 
     </li> 
 
</ul>

Answer 2

body { 
 
    background-color: #cac3bc 
 
} 
 
nav { 
 
\t float: left; 
 
} 
 
nav ul ul { 
 
\t display: none; 
 
} 
 
\t nav ul li:hover > ul { 
 
\t \t display: block; 
 
\t } 
 
\t nav ul { 
 
\t background-color: #fff; 
 
\t margin-top: 10px; 
 
\t padding: 0 20px; 
 
\t list-style: none; 
 
\t position: relative; 
 
\t display: inline-table; 
 
\t margin-right: -80px; 
 
} 
 
\t nav ul li { 
 
\t float: left; 
 
} 
 
\t \t nav ul li:hover { 
 
\t \t \t border-bottom: 5px solid #f5aa65; 
 
      color: #fff; 
 
\t \t \t 
 
\t \t } 
 
\t \t nav ul li a:hover { 
 
\t \t \t color: #000; 
 
\t \t } 
 
\t 
 
\t nav ul li a { 
 
\t \t display: block; 
 
\t \t padding: 15px 15px; 
 
\t \t font-family: 'PT Sans', sans-serif; 
 
\t \t color: #000; 
 
\t \t text-decoration: none; 
 
\t } 
 
\t nav ul ul { 
 
\t background-color:#fff; 
 
\t border-radius: 0px; 
 
\t padding: 0; 
 
\t position: absolute; 
 
\t top: 100%; 
 
\t box-shadow: 0px 0px 9px rgba(0,0,0,0.15); 
 
} 
 
\t nav ul ul li { 
 
\t \t float: none; 
 
\t \t position: relative; 
 
\t } 
 
\t \t nav ul ul li a { 
 
\t \t \t padding: 15px 40px; 
 
\t \t \t color: #000; 
 
\t \t } 
 

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

<body> 
 
<nav> 
 
\t <ul> 
 
\t \t <li><a href="#">One</a> 
 
     \t <ul> 
 
\t \t \t \t <li><a href="1.html">A</a></li> 
 
\t \t \t \t <li><a href="2.html">B</a> 
 
      </ul> 
 
     </li> 
 
\t \t <li><a href="#">Two</a> 
 
\t \t \t <ul> 
 
\t \t \t \t <li><a href="3.html">A</a></li> 
 
\t \t \t \t <li><a href="4.html">B</a></li> 
 
\t \t \t \t <li><a href="5.html">C</a></li> 
 
\t \t \t </ul> 
 
\t \t </li> 
 
\t \t <li><a href="#">Three</a> 
 
\t \t \t <ul> 
 
\t \t \t \t <li><a href="6.html">A</a></li> 
 
\t \t \t \t <li><a href="7.html">B</a></li> 
 
\t \t \t </ul> 
 
\t \t </li> 
 
\t \t <li><a href="8.html">Four</a></li> 
 
\t </ul> 
 
</nav> 
 
</body>