「刪除備份」菜單我的代碼

-1

所以我只用我已經定位他們對我的頁眉和頁腳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>

感謝

來源

2016-04-27 Epsilon

好了，所以首先第一件事情是，這個下拉菜單，你必須將很可能無法工作，因爲你的下拉菜單會只有你的時候顯示懸停在按鈕上，而不是懸停在實際的下拉菜單上。因此，您的下拉菜單將會出現，但是當您嘗試點擊鏈接並從下拉按鈕中移除光標時，菜單消失。據說創建一個CSS下拉菜單，你會想要將下拉按鈕和下拉菜單都包裝在一個容器中，然後將該容器定位爲相對位置。然後，你可以放置在下拉菜單中絕對和你能控制與頂部的相對定位的div這裏面絕對定位的div的位置，左，右，並在你的CSS底部。希望這是有道理的。所以我爲你創建了一個小提琴來查看創建下拉菜單的正確方法。

這裏是小提琴Fiddle

首先你會與下面的標記就爲你們的下拉菜單

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

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

然後，你可以在此看到CSS我已經定位在頁腳下拉菜單中有以下的CSS bottom:100%;top:auto;left:0;right:auto;這樣你就可以控制一個絕對位置d的位置iv相應地在相對定位的div內。

來源

2016-04-27 20:24:40

「刪除備份」菜單我的代碼

回答

相關問題