2017-07-29 70 views
0

我遇到了問題。我已經在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"> 做你們有什麼想法如何解決呢? :<

回答

0

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規則。