title: Dropdown in DIV
body: <p>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 : <a href="https://www.w3schools.com/howto/howto_css_dropdown.asp" rel="nofollow noreferrer">https://www.w3schools.com/howto/howto_css_dropdown.asp</a></p>
  
  <p>So this is code what im talking about :</p>
  
  <pre><code>          &lt;div class='ipsLayout_container'&gt;
            &lt;ul id="menu"&gt;
             &lt;!-- &lt;li&gt;&lt;a href="{setting="base_url"}"&gt;&lt;i class="fa fa-home" aria-hidden="true"&gt;&lt;/i&gt; Strona główna&lt;/a&gt;&lt;/li&gt; --&gt;
              &lt;li&gt;&lt;a href="{setting="base_url"}staff"&gt;&lt;i class="fa fa-users" aria-hidden="true"&gt;&lt;/i&gt; Admini&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a target="_blank" href="http://dema.cs-placzabaw.pl"&gt;&lt;i class="fa fa-play-circle-o" aria-hidden="true"&gt;&lt;/i&gt; Dema&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a target="_blank" href="{setting="base_url"}bans"&gt;&lt;i class="fa fa-ban" aria-hidden="true"&gt;&lt;/i&gt; SourceBans&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a target="_blank" href="{setting="base_url"}sklep"&gt;&lt;i class="fa fa-shopping-cart" aria-hidden="true"&gt;&lt;/i&gt;Sklep VIP 24/7&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a target="_blank" href="{setting="base_url"}stats"&gt;&lt;i class="fa fa-bar-chart" aria-hidden="true"&gt;&lt;/i&gt;Statystyki&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a target="_blank" href="{setting="base_url"}search"&gt;&lt;i class="fa fa-search" aria-hidden="true"&gt;&lt;/i&gt;Szukaj&lt;/a&gt;&lt;/li&gt;
        &lt;!-- *PRZYCISK WIĘCEJ* --&gt; 
              &lt;div class="dropdown"&gt;
        &lt;li&gt;&lt;a class="dropbtn"&gt;&lt;i class="fa fa-caret-down" aria-hidden="true"&gt;&lt;/i&gt;Więcej&lt;/a&gt;&lt;/li&gt; 
    &lt;div class="dropdown-content"&gt;
          &lt;li&gt;&lt;a target="_blank" href="{setting="base_url"}search"&gt;Szukaj&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a target="_blank" href="{setting="base_url"}clubs"&gt;Kluby&lt;/a&gt;&lt;/li&gt;
    &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>So i want to put div class dropdown into layout_container. When i delete " <code>&lt;div class="dropdown"&gt;</code> 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!</p>
  
  <p>//edit
  So we changed code. </p>
  
  <pre><code>      &lt;ul id="menu"&gt;
         &lt;!-- &lt;li&gt;&lt;a href="{setting="base_url"}"&gt;&lt;i class="fa fa-home" aria-hidden="true"&gt;&lt;/i&gt; Strona główna&lt;/a&gt;&lt;/li&gt; --&gt;
          &lt;li&gt;&lt;a href="{setting="base_url"}staff"&gt;&lt;i class="fa fa-users" aria-hidden="true"&gt;&lt;/i&gt; Admini&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a target="_blank" href="http://dema.cs-placzabaw.pl"&gt;&lt;i class="fa fa-play-circle-o" aria-hidden="true"&gt;&lt;/i&gt; Dema&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a target="_blank" href="{setting="base_url"}bans"&gt;&lt;i class="fa fa-ban" aria-hidden="true"&gt;&lt;/i&gt; SourceBans&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a target="_blank" href="{setting="base_url"}sklep"&gt;&lt;i class="fa fa-shopping-cart" aria-hidden="true"&gt;&lt;/i&gt;Sklep VIP 24/7&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a target="_blank" href="{setting="base_url"}stats"&gt;&lt;i class="fa fa-bar-chart" aria-hidden="true"&gt;&lt;/i&gt;Statystyki&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a target="_blank" href="{setting="base_url"}search"&gt;&lt;i class="fa fa-search" aria-hidden="true"&gt;&lt;/i&gt;Szukaj&lt;/a&gt;&lt;/li&gt;
    &lt;!-- *PRZYCISK WIĘCEJ* --&gt; 
          &lt;li class="dropdown"&gt;
              &lt;a class="dropbtn"&gt;&lt;i class="fa fa-caret-down" aria-hidden="true"&gt;&lt;/i&gt;Więcej&lt;/a&gt;
          &lt;/li&gt; 
          &lt;div class="dropdown-content"&gt;
              &lt;li&gt;&lt;a target="_blank" href="{setting="base_url"}search"&gt;Szukaj&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a target="_blank" href="{setting="base_url"}clubs"&gt;Kluby&lt;/a&gt;&lt;/li&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>now its sth like this. Now, we need to change css code to fit this, already the link is on the top of topic. </p>
  
  <p>CSS:</p>
  
  <pre><code>/* Dropdown Button */
  .dropbtn {
      background-color: #4CAF50;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
  }
  
  /* The container &lt;div&gt; - 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;
  }
  </code></pre>
  
  <p>ok now i know guys, that is not the correct code that "<code>&lt;li class="dropdown"&gt;</code>
  do you guys have any idea how to fix it? :&lt;</p>