DIV中的下拉菜单
问题描述:
我遇到了问题。我已经在HTML,CSS的绿色。我的朋友问我做一个下拉按钮,然后我说..“ok”:/ 你能帮我吗?我的问题是,当我想从本教程中添加按钮:https://www.w3schools.com/howto/howto_css_dropdown.aspDIV中的下拉菜单
所以这是代码什么即时通讯谈论:
<div class='ipsLayout_container'>
<ul id="menu">
<!-- <li><a href="{setting="base_url"}"><i class="fa fa-home" aria-hidden="true"></i> Strona główna</a></li> -->
<li><a href="{setting="base_url"}staff"><i class="fa fa-users" aria-hidden="true"></i> Admini</a></li>
<li><a target="_blank" href="http://dema.cs-placzabaw.pl"><i class="fa fa-play-circle-o" aria-hidden="true"></i> Dema</a></li>
<li><a target="_blank" href="{setting="base_url"}bans"><i class="fa fa-ban" aria-hidden="true"></i> SourceBans</a></li>
<li><a target="_blank" href="{setting="base_url"}sklep"><i class="fa fa-shopping-cart" aria-hidden="true"></i>Sklep VIP 24/7</a></li>
<li><a target="_blank" href="{setting="base_url"}stats"><i class="fa fa-bar-chart" aria-hidden="true"></i>Statystyki</a></li>
<li><a target="_blank" href="{setting="base_url"}search"><i class="fa fa-search" aria-hidden="true"></i>Szukaj</a></li>
<!-- *PRZYCISK WIĘCEJ* -->
<div class="dropdown">
<li><a class="dropbtn"><i class="fa fa-caret-down" aria-hidden="true"></i>Więcej</a></li>
<div class="dropdown-content">
<li><a target="_blank" href="{setting="base_url"}search">Szukaj</a></li>
<li><a target="_blank" href="{setting="base_url"}clubs">Kluby</a></li>
</div>
</div>
所以我希望把DIV类下拉到layout_container。当我删除“<div class="dropdown">
它没关系,但它没有显示我悬停,在CSS中风格。我该怎么做,在我的菜单中得到这个按钮,但没有创建另一个div和使用绝对定位? 我会很感激任何帮助。 Blesssings!
//编辑 所以我们改变了代码。
<ul id="menu">
<!-- <li><a href="{setting="base_url"}"><i class="fa fa-home" aria-hidden="true"></i> Strona główna</a></li> -->
<li><a href="{setting="base_url"}staff"><i class="fa fa-users" aria-hidden="true"></i> Admini</a></li>
<li><a target="_blank" href="http://dema.cs-placzabaw.pl"><i class="fa fa-play-circle-o" aria-hidden="true"></i> Dema</a></li>
<li><a target="_blank" href="{setting="base_url"}bans"><i class="fa fa-ban" aria-hidden="true"></i> SourceBans</a></li>
<li><a target="_blank" href="{setting="base_url"}sklep"><i class="fa fa-shopping-cart" aria-hidden="true"></i>Sklep VIP 24/7</a></li>
<li><a target="_blank" href="{setting="base_url"}stats"><i class="fa fa-bar-chart" aria-hidden="true"></i>Statystyki</a></li>
<li><a target="_blank" href="{setting="base_url"}search"><i class="fa fa-search" aria-hidden="true"></i>Szukaj</a></li>
<!-- *PRZYCISK WIĘCEJ* -->
<li class="dropdown">
<a class="dropbtn"><i class="fa fa-caret-down" aria-hidden="true"></i>Więcej</a>
</li>
<div class="dropdown-content">
<li><a target="_blank" href="{setting="base_url"}search">Szukaj</a></li>
<li><a target="_blank" href="{setting="base_url"}clubs">Kluby</a></li>
</div>
现在它的某事像这样。现在,我们需要改变CSS代码,以适应这一点,已经链接是在顶部的主题。
CSS:
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
确定现在我知道的家伙,这不是正确的代码,“<li class="dropdown">
做你们有什么想法如何解决呢? :<
答
https://jsfiddle.net/yxohfaex/ `
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<ul id="menu">
<!-- <li><a href="{setting="base_url"}"><i class="fa fa-home" aria-hidden="true"></i> Strona główna</a></li> -->
<li><a href=""><i class="fa fa-users" aria-hidden="true"></i> Admini</a></li>
<li><a target="_blank" href="http://dema.cs-placzabaw.pl"><i class="fa fa-play-circle-o" aria-hidden="true"></i> Dema</a></li>
<li><a target="_blank" href=""><i class="fa fa-ban" aria-hidden="true"></i> SourceBans</a></li>
<li><a target="_blank" href=""><i class="fa fa-shopping-cart" aria-hidden="true"></i>Sklep VIP 24/7</a></li>
<li><a target="_blank" href=""><i class="fa fa-bar-chart" aria-hidden="true"></i>Statystyki</a></li>
<li><a target="_blank" href=""><i class="fa fa-search" aria-hidden="true"></i>Szukaj</a></li>
<!-- *PRZYCISK WIĘCEJ* -->
</ul>
<div class="dropdown">
<button class="dropbtn">
<i class="fa fa-caret-down" aria-hidden="true">
Więcej</i></button>
<div class="dropdown-content">
<a target="_blank" href="">Szukaj</a>
<a target="_blank" href="">Kluby</a>
</div>
</div>
我相信这能解决你的问题。 列表元素阻止了CSS从按钮弹出,因为li自己没有应用相同的CSS规则。