コードの「ドロップダウン」メニュー

Question

CSSのみを使用したドロップダウンメニューを作成し、ヘッダーとフッターに配置しました。問題は、どのようにして自分のボタンをその下に（フッタボタンのみ）。何か案は？

CSS

.d_button { 
 
    color: #FFFFFF; 
 
    background-color: #222222; 
 
    border: none; 
 
    cursor: pointer; 
 
    font-size: 80%; 
 
    font-weight: bolder; 
 
    line-height: 50%; 
 
    padding: 8px; 
 
} 
 
.drop_top { 
 
    position: inherit; 
 
    display: inline-block; 
 
    background-color: #222222; 
 
    float: right; 
 
} 
 
.drop_bot { 
 
    position: inherit; 
 
    display: inline-block; 
 
    background-color: #222222; 
 
    float: left; 
 
} 
 
.drop_content { 
 
    display: none; 
 
    position: absolute; 
 
    right: 14px; 
 
    background-color: #222222; 
 
    min-width: 80px; 
 
} 
 
.drop_content a { 
 
    color: #FFFFFF; 
 
    padding: 5px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
.drop_content a:hover { 
 
    color: #03A9F4; 
 
} 
 
.drop_top:hover .drop_content { 
 
    display: block; 
 
} 
 
.drop_bot:hover .drop_content { 
 
    display: block; 
 
}

<div id="header_container"> 
 
    <div id="header"> 
 
    Header Content 
 
    <div class="drop_top"> 
 
     <button class="d_button"> 
 
     <div id="nav_icon" class="top">&#9776;</div> 
 
     </button> 
 
     <div class="drop_content"> 
 
     <a href="#">A</a> 
 
     <a href="#">B</a> 
 
     <a href="#">C</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div id="container"> 
 
    <div id="content"> 
 

 
    </div> 
 
</div> 
 

 
<div id="footer_container"> 
 
    <div id="footer"> 
 
    Footer Content 
 
    <div class="drop_bot"> 
 
     <button class="d_button"> 
 
     <div id="nav_icon" class="bottom">&#9776;</div> 
 
     </button> 
 
     <div class="drop_content"> 
 
     <a href="#">A</a> 
 
     <a href="#">B</a> 
 
     <a href="#">C</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

最初のおかげ

Answer 1

[OK]をので、最初のものはときに、あなたのドロップダウンメニューのみが表示されますので、あなたが持っているこのドロップダウンを超える可能性が動作しないということです実際のプルダウンメニューにカーソルを置いたときは表示されません。ドロップダウンメニューが表示されますが、ドロップダウンボタンからカーソルを削除するとリンクをクリックしようとすると、メニューが消えます。これは、ドロップダウンメニューとコンテナ内のドロップダウンメニューの両方をラップし、このコンテナを相対的な位置に配置するCSSドロップダウンメニューを作成すると言われています。次に、ドロップダウンメニューを絶対位置に配置することができます。また、この絶対配置されたdivの位置を、CSSの上、右、左、下の相対配置div内で制御できます。うまくいけばそれは理にかなっている。だから私はあなたのためのドロップダウンメニューを作成するための適切な技術を表示するためのフィドルを作成しました。そして、あなたがこの中で見ることができます

.dropdown{ 
    position:relative; 
} 
.dropdown-menu{ 
    position:absolute; 
    top:100%;right:0; 
    min-width:80px; 
    background:#000; 
    display:none; 
} 
footer .dropdown-menu{ 
    bottom:100%;top:auto;left:0;right:auto; 
} 
.dropdown:hover .dropdown-menu{ 
    display:block; 
} 
.dropdown-menu a{ 
    display:block; 
    color:#fff; 
    padding:5px; 
    text-decoration:none; 
} 
.dropdown-button{ 
    border:none; 
    background:#222; 
    color:#fff; 
    outline:0; 
    cursor:pointer; 
    padding:10px; 
} 
header .dropdown{float:right} 
footer .dropdown{float:left;} 

：ここ

はフィドルFiddle

まず、あなたは次のCSSその後、あなたのドロップダウンメニューのために次のマークアップで

<div class="dropdown"> 
    <button class="dropdown-button">&#9776;</button> 
    <div class="dropdown-menu"> 
    <a href="#">Link</a> 
    <a href="#">Link</a> 
    <a href="#">Link</a> 
    </div> 
</div> 

を開始しますです私は、フッタのドロップダウンメニューを次のCSS bottom:100%;top:auto;left:0;right:auto;を持つように配置しているので、絶対配置されたdの配置を制御することができますivはそれに応じて相対位置付けdivの内側にあります。