“删除备份”菜单我的代码

-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

“删除备份”菜单我的代码

回答

相关问题