Turn HTML List into Nested Dropdown Menu with CSS

user_19537415 0
Viewed 56

I have some HTML code, and am trying to turn it into a dropdown menu. I want the user to hover/click(either is fine) over the button, and the dropdown will appear. They then should be able to hover/click on the options to open up the nested dropdown.

body {
  background-color: #cefff2;
}

li {
  color: #abcd23;
}

a {
  color: #ace123;
  font-family: papyrus;
  font-size: 30px;
}

h1 {
  color: #fac333;
}

.dropdown {
  color: #abcd23;
  position: relative;
  display: inline-block;
}

.dropdown-item {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdpwnMenuButton {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown-menu dropdown-submenu {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
<link href="webtest2.0/src/webapp/WEB-INF/indexFormat.css" rel="stylesheet" type="text/css" />

<h1>
  Submittal Automation Tool
</h1>
<p>Input params for file using dropdown. The program will search the existing file system for that pdf. If it does not exist, use manual entry option </p>


<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-mdb-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li>
      <a class="dropdown-item" href="#">Access Doors &raquo; </a>
      <ul class="dropdown-menu dropdown-submenu">
        <li>
          <a class="dropdown-item" href="https://codepen.io/gabriellewee/pen/ybKxgB">Multi level 1</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">Multi level 2</a>
        </li>
      </ul>
    </li>
    <li>
      <a class="dropdown-item" href="#">Ceiling</a>
      <ul class="dropdown-menu dropdown-submenu">
        <li>
          <a class="dropdown-item" href="#">Armstrong</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">Caddy</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">Ramset</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">USG</a>
        </li>
      </ul>


    </li>
    <li>
      <a class="dropdown-item" href="#">Corner Beads</a>
      <ul class="dropdown-menu dropdown-submenu">
        <li>
          <a class="dropdown-item" href="#">ClarkDietrich</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">No-Coat</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">USG</a>
        </li>
      </ul>
    </li>

    <li>
      <a class="dropdown-item" href="#">Gypsum Board</a>
      <ul class="dropdown-menu dropdown-submenu">
        <li>
          <a class="dropdown-item" href="#">Certainteed</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">Georgia Pacific</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">National</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">USG</a>
        </li>
      </ul>
    </li>

    <li>
      <a class="dropdown-item" href="#">Insulation</a>
      <ul class="dropdown-menu dropdown-submenu">
        <li>
          <a class="dropdown-item" href="#">Certainteed</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">Johns Manville</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">Knauf</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">Owens Corning</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">RockWool</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">Roxul</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">ThermaFiber</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">USG</a>
        </li>
      </ul>
    </li>

    <li>
      <a class="dropdown-item" href="#">LEED</a>
      <ul class="dropdown-menu dropdown-submenu">
        <li>
          <a class="dropdown-item" href="#">Armstrong</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">ClarkDietrich</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">DBlaze</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">Johns Manville</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">National</a>
        </li>

        <li>
          <a class="dropdown-item" href="#">USG</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">LEED Certifications</a>
          <ul class="dropdown-menu dropdown-submenu">
            <li>
              <a class="dropdown-item" href="#">Armstrong</a>
            </li>
            <li>
              <a class="dropdown-item" href="#">Clarkdietrich</a>
            </li>
            <li>
              <a class="dropdown-item" href="#">National</a>
            </li>
            <li>
              <a class="dropdown-item" href="#">USG</a>
            </li>

          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a class="dropdown-item" href="#">Metal Framing</a>
      <ul class="dropdown-menu dropdown-submenu">
        <li>
          <a class="dropdown-item" href="#">Clarkdietrich</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">Marino Ware</a>
        </li>
      </ul>
    </li>

    <li>
      <a class="dropdown-item" href="#">Plywood</a>
      <ul class="dropdown-menu dropdown-submenu">
        <li>
          <a class="dropdown-item" href="#">DBlaze</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">SafeGuard</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">Viance</a>
        </li>
      </ul>
    </li>

    <li>
      <a class="dropdown-item" href="#">Sealant</a>
      <ul class="dropdown-menu dropdown-submenu">
        <li>
          <a class="dropdown-item" href="#">Firetop</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">Hilti</a>
        </li>
        <li>
          <a class="dropdown-item" href="">USG</a>
        </li>
      </ul>
    </li>


  </ul>
</div>


<p>
  Created by someone :)
</p>
<a class="dropdown-item" href="https://mdbootstrap.com/docs/standard/extended/dropdown-multilevel/#">funny link</a>

I've been struggling a lot, I keep getting weird results, but nothing that will turn it into a dropdown. The bullet points will stay as bullet points, or the text will just disappear and there will only be bullets. If I remove all the CSS, everything works as expected (for there only being html).

drop-down-menu css html
1 Answers

Not sure if you're still working on this project, but give this a try. This drop down utilizes a little bit of JavaScript:

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function mainDropDown() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function subMenu(clickedElement) {
      let appropriateSubmenu = clickedElement.nextElementSibling;
      appropriateSubmenu.classList.toggle("show");
      
}
body{
    background-color: #cefff2;
}

a{
color: #ace123;
font-family: papyrus;
font-size: 30px;
}

h1{
color:#fac333;
}
/* Dropdown Button */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: .2s;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #037048;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  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;
  transition: .3s;
  cursor: pointer;
}

.sub-menu-item{
  display: none;
  background-color: #ccc;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover, .dropdown-content a:active, .dropdown-content a:focus {background-color: #ddd}

.sub-menu-item a:hover, .sub-menu-item a:active, .sub-menu-item a:focus {background-color: #bbb}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
<h1>
Submittal Automation Tool
</h1>
<p>Input params for file using dropdown. The program will search the existing file system for that pdf. If it does
not exist, use manual entry option </p>
<div class="dropdown">
  <button onclick="mainDropDown()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a onclick="subMenu(this)">Access Doors</a>
      <div class="sub-menu-item">
        <a href="#">Multi level 2</a>
      </div>
    <a onclick="subMenu(this)">Ceiling</a>
      <div class="sub-menu-item">
        <a href="#">Armstrong</a>
        <a href="#">Caddy</a>
        <a href="#">Ramset</a>
        <a href="#">USG</a>
      </div>
    <a onclick="subMenu(this)">Corner Beads</a>
      <div class="sub-menu-item">
        <a href="#">ClarkDietrich</a>
        <a href="#">No-Coat</a>
        <a href="#">USG</a>
        </div>
    <a onclick="subMenu(this)">Gypsum Board</a>
      <div class="sub-menu-item">
        <a href="#">Certainteed</a>
        <a href="#">Georgia Pacific</a>
        <a href="#">National</a>
        <a href="#">USG</a>
      </div>
    <a onclick="subMenu(this)">Insulation</a>
      <div class="sub-menu-item">
        <a href="#">Certainteed</a>
        <a href="#">Johns Manville</a>
        <a href="#">Knauf</a>
        <a href="#">Owens Corning</a>
        <a href="#">RockWool</a>
        <a href="#">Roxul</a>
        <a href="#">ThermaFiber</a>
        <a href="#">USG</a>
      </div>
    <a onclick="subMenu(this)">LEED</a>
      <div class="sub-menu-item">
        <a href="#">Armstrong</a>
        <a href="#">ClarkDietrich</a>
        <a href="#">DBlaze</a>
        <a href="#">Johns Manville</a>
        <a href="#">National</a>
        <a href="#">USG</a>
      </div>
    <a onclick="subMenu(this)">LEED Certifications</a>
      <div class="sub-menu-item">
        <a href="#">Armstrong</a>
        <a href="#">ClarkDietrich</a>
        <a href="#">National</a>
        <a href="#">USG</a>
      </div>
    <a onclick="subMenu(this)">Metal Framing</a>
      <div class="sub-menu-item">
        <a href="#">Clarkdietrich</a>
        <a href="#">Marino Ware</a>
      </div>
    <a onclick="subMenu(this)">Plywood</a>
      <div class="sub-menu-item">
        <a href="#">DBlaze</a>
        <a href="#">SafeGuard</a>
        <a href="#">Viance</a>
      </div>
     <a onclick="subMenu(this)">Sealant</a>
      <div class="sub-menu-item">
        <a href="#">Firetop</a>
        <a href="#">Hilti</a>
        <a href="#">USG</a>
       </div>
  </div>
</div>

Source: https://www.w3schools.com/howto/howto_js_dropdown.asp

user_172452610
Related