코드에서 오버플로를 제거하는 이유는 무엇입니까? CSS 스타일의 ul에서 메뉴를 숨 깁니다. 오버 플로우 제거

Question

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a, .dropbtn { 
 
    display: inline-block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover, .dropdown:hover .dropbtn { 
 
    background-color: red; 
 
} 
 

 
li.dropdown { 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    z-index: 1; 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
.dropdown-content a:hover {background-color: #f1f1f1} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

<ul> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li class="dropdown"> 
 
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a> 
 
    <div class="dropdown-content"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 
    </li> 
 
</ul> 
 

 
<h3>Dropdown Menu inside a Navigation Bar</h3> 
 
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>

https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar

: 숨겨진; ul에서 CSS 스타일로. 메뉴가 사라집니다. w3schools 웹 사이트에서 예를 발견했습니다. 오버플로를 제거하면 스타일이 ul에서 숨겨져 메뉴가 숨겨집니다.

Answer 1

ul은 블록 레벨 요소입니다. li가 떠내려 때 그들은 어떤 공간 따라서 ul의 높이가 지금 ul에 (가시 아무것도하지만) 오버 플로우를 선언 0

로 감소 ul 포함하게 새로운 블록 형식 컨텍스트를 생성한다을 차지하지의 더 이상 0px 높이가 될 수 없습니다.

Answer 2

메뉴가 사라지지 않았습니다. 아직 남아 있습니다. @Fran이 제안한 것처럼 검사하거나 단순히 마우스를 마우스로 움직이면 강조 표시됩니다. 당신이 겪고있는 행동은 overflow: hidden;이 블럭에 새로운 포맷팅을하기 때문입니다. 즉, 각 요소가 자신의 포맷을 따르고 정상적인 흐름으로 표시된다는 것을 의미합니다. 블록 형식 지정 컨텍스트에 대한 자세한 내용은 link을 확인하십시오.