CSS - overflow: hidden nicht Drop-Down decken

Question

Ich habe folgende CSS und 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>

wie Sie sehen können, ist die Farbe Verschüttungen des hor-nav bar auf den user-info Bereich.

Ich habe recherchiert und festgestellt, dass wenn ich overflow-x: hidden; einstellen wird es dies nicht tun (siehe this Artikel).

Ich habe das versucht, und es ist wahr - die Navigationsleiste spill die user-info nicht in aber, wenn Sie über eine der Navigationsleiste schweben options, wird die dropdown nicht herunter, sondern die vert-nav gibt Ihnen eine Bildlaufleiste (siehe this jsfiddle).

Darüber hinaus, wenn Sie overflow-y: hidden; tun, gibt es überhaupt keine Bildlaufleiste.

Ich versuche, es zu bekommen, so dass die background-color des hor-nav nicht in andere divs verschüttet, sondern ermöglicht auch die dropdown aktiviert werden und arbeiten

Ihnen danken.

Answer 1

Der einfachste Weg, dies mit der geringsten Codeänderung zu tun, ist, dem Bereich user-info eine Hintergrundfarbe zu geben. Da der hor-nav Abschnitt auf dem Z-Index niedriger ist, wird dies den visuellen Eindruck geben, den Sie wollen, obwohl der Balken immer noch unter dem user-info Abschnitt sein wird, der es nicht zu sein scheint, und das Dropdown wird funktionieren wie jetzt.

Je nach Ihrer Anfrage können Sie dies auf eine andere Weise tun, indem Sie prozentuale Breiten für alle 3 Elemente verwenden, so dass sie sich nicht überlappen. Sehen Sie bitte diesen fiddle für Codeänderung (man beachte ich das Markup ändern, um etwas, Breiten und hinzugefügt Box Sizing CSS-Eigenschaft)

Answer 2

So wie ich es sehe, haben Sie 3 Optionen

1. Sie können versuchen, Marge Hinzufügen -links/rechts auf die hor-nav. .hor-nav { margin: auto 128px; }
2. Eine andere Option ist, eine bestimmte Breite auf .hor-nav einzustellen. Oder praktisch die Breite davon schneiden. .hor-nav { width: calc(100% - 128px); }
3. Und drittens ist eine Hintergrundfarbe der .user-info