"Drop-Up" Menü für meinen Code

Question

Also habe ich ein Drop-Down-Menü nur mit CSS erstellt und ich habe sie auf meiner Kopf- und Fußzeile positioniert, mein Problem ist, wie kann ich meine Menüanzeige über meine Schaltfläche anstelle von darunter (nur für Fußtaste). Irgendwelche Ideen?

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>

Dank

Answer 1

Ok, so erste Dinge zuerst, dass dieser Drop-Down, die Sie haben mehr als wahrscheinlich nicht funktionieren, weil Ihr Dropdown-Menü zeigt nur, wenn Sie Bewegen Sie den Mauszeiger über die Schaltfläche und nicht über das Dropdown-Menü. Ihr Dropdown-Menü erscheint, aber wenn Sie versuchen, auf die Links zu klicken, sobald Sie den Cursor von der Dropdown-Schaltfläche entfernen, wird das Menü ausgeblendet. Um ein css-Dropdown-Menü zu erstellen, müssen Sie sowohl die Dropdown-Schaltfläche als auch das Dropdown-Menü in einem Container umbrechen und dann diesen Container als relativ positionieren. Dann können Sie das Dropdown-Menü als absolut positionieren und Sie können die Position dieses absolut positionierten div innerhalb des relativ positionierten div mit top, right, left und bottom in Ihrem css steuern. Hoffentlich macht das Sinn. Also habe ich eine Fiedel für Sie erstellt, um die richtige Technik zum Erstellen eines Dropdown-Menüs zu sehen. Hier

ist die Geige Fiddle

Zuerst mit dem folgenden Markup für Ihre Drop-Down-Menü

<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> 

dann die folgenden Css beginnt:

.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;} 

Dann können Sie in diesem sehen css Ich habe das Dropdown-Menü für die Fußzeilen so positioniert, dass es die folgenden css bottom:100%;top:auto;left:0;right:auto; enthält, so dass Sie die Platzierung eines absolut positionierten d steuern können iv innerhalb eines relativ positionierten div entsprechend.