CSS - 오버 플로우 : 드롭 다운

Question

적용되지 숨겨진 I가 다음과 같은 CSS와 HTML :

body { background-color: #c0c0c0; } 
 
.title-bar, { background-color: #999; color: white; float: left; overflow: hidden; } 
 
.title-bar { 
 
    border-bottom: 1px solid white; 
 
    height: 128px; 
 
    width: 100%; 
 
} 
 
.logo, .user-info { box-sizing: content-box; height: 100%; width: 128px; } 
 
.logo{ 
 
    align-items: center; 
 
    background-color: #369; 
 
    border-right: 1px solid white; 
 
    display: flex; 
 
    float: left; 
 
    font-size: 2em; 
 
    font-kerning: none; 
 
    justify-content: center; 
 
} 
 
.user-info { 
 
    align-items: center; 
 
    border-left: 1px solid white; 
 
    display: flex; 
 
    float: right; 
 
    justify-content: space-between; 
 
    flex-flow: column nowrap; 
 
} 
 
.user-info .circle { 
 
    border: 2px solid #369; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    flex: 0 0 auto; 
 
    height: 32px; 
 
    margin: 8px 8px; 
 
    overflow: hidden; 
 
    transition: border 0.15s ease-out; 
 
    width: 32px; 
 
} 
 
.user-info .circle:hover { border-width: 4px; } 
 
.user-info .container { 
 
    border-top: 1px solid white; 
 
    display: flex; 
 
    justify-content: center; 
 
    margin-top: 6px;width: 100%; 
 
} 
 
.hor-nav { background-color: #404040; } 
 
.option { display: inline-block; position: relative; } 
 
.hor-nav .option:hover {background-color: #369; } 
 
.option a { 
 
    color: white; 
 
    display: inline-block; 
 
    font-size: 1em; 
 
    padding: 14px; 
 
    text-align: center; 
 
    transition: background-color 0.15s ease-out; 
 
} 
 
.option .dropdown { display: none; position: absolute; } 
 
.option:hover .dropdown{ display: block; } 
 
.dropdown a { 
 
    display: block; 
 
    text-align: left; 
 
    width: 100%; 
 
}

<div class="title-bar"> 
 
    <a class="logo" href="#"> 
 
    </a> 
 
    <div class="user-info"> 
 
    <a href="#" class="circle"></a> 
 
    <span>User name</span> 
 
    <div class="container"> 
 
     <a href="#" class="circle"></a> 
 
     <a href="#" class="circle"></a> 
 
    </div> 
 
    </div> 
 
    <div class="hor-nav"> 
 
    <div class="option"> 
 
     <a href="">OPTION 1</a> 
 
     <div class="dropdown"> 
 
     <a href="#">ITEM 1</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

당신이 볼 수 있듯이, user-info 영역으로 hor-nav 바의 색상 유출.

내가 조사한 결과 overflow-x: hidden;으로 설정하면이 작업이 수행되지 않습니다 (this 도움말 참조).

나는 그것을 시도하고 그것은 사실합니다 - 탐색 모음은 user-info로 유출하지 않지만, 당신은 탐색 모음 options 중 하나 위에 마우스를 올려 때 dropdown 내려 오지 않는 대신 vert-nav 당신에게 스크롤 막대를 제공합니다 (this jsfiddle 참조).

또한 overflow-y: hidden;을 수행하면 스크롤 막대가 전혀 없습니다.

은 내가 hor-nav의 background-color 다른 DIV 년대에 유출하지 않도록 그것을 얻으려고 노력뿐만 아니라 dropdown이 활성화 될 수 있도록하고

당신을 감사 작동하고있다.

Answer 1

최소한의 코드 변경으로 가장 쉬운 방법은 user-info 영역에 배경색을 지정하는 것입니다. hor-nav 섹션이 Z- 인덱스에서 더 낮기 때문에 막대가 여전히 user-info 섹션 아래에 있지만 시각적 인 영향을 주지만 표시되지는 않을 것이며 지금처럼 드롭 다운이 수행됩니다.

귀하의 문의에 따라, 3 가지 요소 모두에 백분율 기반 너비를 사용하여 다른 방법으로이를 수행 할 수 있습니다. 따라서 서로 겹치지 않습니다. 코드 변경이 fiddle를 참조하십시오

Answer 2

내가 볼때 (나는 약간 폭을 마크 업 순서를 변경하고, CSS 속성을 크기 조정 상자를 추가 주), 당신은 3 개 가지 옵션

당신은 마진을 추가하는 시도 할 수 있습니다

1. 이 왼쪽/오른쪽으로 hor-nav. .hor-nav { margin: auto 128px; }
2. 또 다른 옵션은 특정 너비를 .hor-nav으로 설정하는 것입니다. 또는 실제 너비를 자르십시오. .hor-nav { width: calc(100% - 128px); }
3. 그리고 세 번째는, 당신은 사용자 정보를 굴러 .user-info