I've got a problem. Im already green in html, css. My friend asked me to make a dropdown button, and then i said.. "ok" :/ Can you help me? My problem is when i want to add button from this tutorial : https://www.w3schools.com/howto/howto_css_dropdown.asp
So this is code what im talking about :
<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>
So i want to put div class dropdown into layout_container. When i delete " <div class="dropdown"> it's ok, but it's not showing me hover, styled in css. What should i do, to get this button in my menu, but without creating another div and using absolute positioning?
I'll be grateful for any help.
Blesssings!
//edit So we changed code.
<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>
now its sth like this. Now, we need to change css code to fit this, already the link is on the top of topic.
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;
}
ok now i know guys, that is not the correct code that "<li class="dropdown">
do you guys have any idea how to fix it? :<
https://jsfiddle.net/yxohfaex/ `
I believe this solves your problem. The list elements were stopping the CSS from being able to pop out from the button as the li's themselves did not have the same CSS rules applied to them.