サブメニューの配置HTML

Question

メニューの1つのオプションにカーソルを合わせると、サブメニューが表示されました。しかし、私はそれを行うと、メニューの高さ（PIC1）を拡張します。私はメニューの高さを56pxに設定しようとしましたが、それは拡張されませんが、私の全体のレイアウト（PIC2）が壊れています。私はまた、位置を置いてみました：絶対、menu_optionとサブメニューの間の空のdivで、その後サブメニューがサイズを変えて属性（PIC3）を失います。

#menu { 
 
    margin-bottom: 20px; 
 
    background-color: #73818c; 
 
    padding: 10px; 
 
} 
 
.menu_option { 
 
    float: left; 
 
    min-width: 100px; 
 
    text-align: center; 
 
    border-right: dotted 2px black; 
 
    padding: 10px; 
 
    font-size: 16px; 
 
} 
 
.submenu { 
 
    text-align: center; 
 
    border-bottom: dotted 2px black; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    display: none; 
 
    font-size: 13px; 
 
} 
 
.submenu:hover { 
 
    background-color: white; 
 
} 
 
.menu_option:hover div { 
 
    display: block; 
 
} 
 
.menu_option:hover { 
 
    background-color: lightgray; 
 
    cursor: pointer; 
 
}

<div id="menu"> 
 
    <div class="menu_option">Strona główna</div> 
 
    <div class="menu_option">Galeria</div> 
 
    <div class="menu_option">Reżyserzy 
 
    <div> 
 
     <div class="submenu" style="margin-top:10px">Quentin Tarantino</div> 
 
     <div class="submenu">Bracia Coen</div> 
 
     <div class="submenu">Wes Anderson</div> 
 
    </div> 
 
    </div> 
 
    <div class="menu_option">Ulubione filmy</div> 
 
    <div class="menu_option">Seriale</div> 
 
    <div class="menu_option">Kontakt</div> 
 
    <div style="clear:both"></div> 
 
</div>

Answer 1

であるあなたのCSSの末尾に追加メニューオプション）は、tの高さを維持しますhatのdiv（とその内容）が親要素の高さに影響を与えるのを防ぎます。

#menu { 
 
    margin-bottom: 20px; 
 
    background-color: #73818c; 
 
    padding: 10px; 
 
} 
 

 
#menu, #menu * { 
 
    box-sizing: border-box; 
 
    } 
 

 
.menu_option { 
 
    float: left; 
 
    min-width: 100px; 
 
    text-align: center; 
 
    border-right: dotted 2px black; 
 
    padding: 10px; 
 
    font-size: 16px; 
 
    position: relative; 
 
} 
 

 
/* I've added this class to the div around the .submenus */ 
 
.submenu_wrapper { 
 
    position: absolute; 
 
    background: lightgray; 
 
    left: 0; 
 
    right: 0; 
 
    } 
 

 
.submenu { 
 
    text-align: center; 
 
    border-bottom: dotted 2px black; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    display: none; 
 
    font-size: 13px; 
 
} 
 
.submenu:hover { 
 
    background-color: white; 
 
} 
 
.menu_option:hover div { 
 
    display: block; 
 
} 
 
.menu_option:hover { 
 
    background-color: lightgray; 
 
    cursor: pointer; 
 
}

<div id="menu"> 
 
    <div class="menu_option">Strona główna</div> 
 
    <div class="menu_option">Galeria</div> 
 
    <div class="menu_option">Reżyserzy 
 
    <div class="submenu_wrapper"> <!-- new class --> 
 
     <div class="submenu" style="margin-top:10px">Quentin Tarantino</div> 
 
     <div class="submenu">Bracia Coen</div> 
 
     <div class="submenu">Wes Anderson</div> 
 
    </div> 
 
    </div> 
 
    <div class="menu_option">Ulubione filmy</div> 
 
    <div class="menu_option">Seriale</div> 
 
    <div class="menu_option">Kontakt</div> 
 
    <div style="clear:both"></div> 
 
</div>

Answer 2

ここ

menu_option:hover > div{ 
    position:absolute; 
    top:10px; 

    } 
.menu_option 
{ 
    position:relative; 
    } 

はsubmenu S（およびposition: relative上を保持しているのdivにposition: absoluteを設定Example

Answer 3

あなたがしようとしているので、窓が小さい（下のクラス.submenuとすべてのdivを保持しているのdivにmain_bxと

.main_bx{ 
display:none; 
} 
.menu_option:hover .main_bx { 
    display: block; 
position:absolute; 

} 

#menu { 
    margin-bottom: 20px; 
    background-color: #73818c; 
    padding: 10px; 
    height: 40px; 
    overflow: visible; 
} 

はスニペットを参照してくださいidという名前を追加しますこのスニペットでいくつかのラッピングを見つける）

#menu { 
 
    margin-bottom: 20px; 
 
    background-color: #73818c; 
 
    padding: 10px; 
 
} 
 
.menu_option { 
 
    float: left; 
 
    min-width: 100px; 
 
    text-align: center; 
 
    border-right: dotted 2px black; 
 
    padding: 10px; 
 
    font-size: 16px; 
 
} 
 
.submenu,.main_bx { 
 
    text-align: center; 
 
    border-bottom: dotted 2px black; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    
 
    font-size: 13px; 
 
} 
 
.submenu:hover { 
 
    background-color: white; 
 
} 
 
.main_bx{ 
 
display:none; 
 
} 
 
.menu_option:hover .main_bx { 
 
    display: block; 
 
position:absolute; 
 
    
 
} 
 
.menu_option:hover{ 
 
    background-color: lightgray; 
 
    cursor: pointer; 
 
    } 
 
#menu { 
 
    margin-bottom: 20px; 
 
    background-color: #73818c; 
 
    padding: 10px; 
 
}

<div id="menu"> 
 
    <div class="menu_option">Strona główna</div> 
 
    <div class="menu_option">Galeria</div> 
 
    <div class="menu_option">Reżyserzy 
 
    <div class="main_bx"> 
 
     <div class="submenu" style="margin-top:10px">Quentin Tarantino</div> 
 
     <div class="submenu">Bracia Coen</div> 
 
     <div class="submenu">Wes Anderson</div> 
 
    </div> 
 
    </div> 
 
    <div class="menu_option">Ulubione filmy</div> 
 
    <div class="menu_option">Seriale</div> 
 
    <div class="menu_option">Kontakt</div> 
 
    <div style="clear:both"></div> 
 
</div>