Question

我遇到了问题。我已经绿色的HTML，CSS。我的朋友让我做一个下拉按钮，然后我说......“好的”：/ 你能帮助我吗？我的问题是当我想要添加本教程中的按钮时：https://www.w3schools.com/howto/howto_css_dropdown.asp

所以这就是我正在谈论的代码：

          <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"> 你们有任何想法如何解决它？：其中

Answer 1

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规则。

DIV下拉

1 个答案: