Show DIV submenu dropdown when hovering

Question

I am trying to create a very simple hover/drop menu using DIVs, no UL/LI. My current code shows the menu with 3 options, but what I need is to have a submenu under Link 2. Here is my current code.

    .dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 0px;
        font-size: 12px;
        border: none;
        cursor: pointer;
    }
    
    .dropdown {
      margin-top:200px;
        position: relative;
        display: inline-block;
    }
    
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 30px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }
    
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }
    
    .dropdown-content a:hover {
        background-color: #f1f1f1;
    }
    
    .dropdown:hover .dropdown-content {
        display: block;
        bottom: 100%;
    }
    
    .dropdown:hover .dropbtn {
        background-color: #3e8e41;
    }
    
    .subdiv {
        display:none;
    }
    
    .dropdown:hover .subdiv {
        display:block;
    }

    <div class="dropdown">
      <button class="dropbtn">^</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>

What I would like to do is this:

<div class="dropdown">
  <button class="dropbtn">^</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
        <div class="submenu">
            <a href="#">SubLink 1</a>
        </div>
    <a href="#">Link 3</a>
  </div>
</div>

Where the SubLink 1 item shows up when you hover over Link 2, but everything I have tried doesn't work, so I'm hoping someone else can help.

Neil · Accepted Answer · 2017-08-31T15:37:18.627

you can do that with the following, all you need to do is to set a div (here submenu_holder) that contains the submenu and the link to hover, the next step is straightforward, as it is the same process with submenu_holder than with dropdown.

    .dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 0px;
        font-size: 12px;
        border: none;
        cursor: pointer;
    }
    
    .dropdown {
      margin-top:200px;
        position: relative;
        display: inline-block;
    }
    
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 30px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }
    
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }
    
    .dropdown-content a:hover {
        background-color: #f1f1f1;
    }
    
    .dropdown:hover .dropdown-content {
        display: block;
        bottom: 100%;
    }
    
    .dropdown:hover .dropbtn {
        background-color: #3e8e41;
    }
    
    .subdiv {
        display:none;
    }
    
    .dropdown:hover .subdiv {
        display:block;
    }

.submenu {
  display:none;
  position:absolute;
  left:60px;
  top:0px;
}

.submenu_holder:hover .submenu {
  display:block;
}

.submenu_holder {
  position:relative;
}

<div class="dropdown">
  <button class="dropbtn">^</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <div class="submenu_holder">
      <a href="#">Link 2</a>
      <div class="submenu">
        <a href="#">SubLink 1</a>
      </div>
    </div>
    <a href="#">Link 3</a>
  </div>
</div>

sol · Answer 2 · 2017-08-31T15:41:55.537

You had a few issues in your code.

For starters, your classnames for the submenu didn't correspond.

Below, I've wrapped the content of the submenu within Link 2. You will need to make further adjustments to make the hover effect smoother...

body {
  /* for demo purposes */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 0px;
  font-size: 12px;
  border: none;
  cursor: pointer;
  /* changed because the target was infuriatingly small for demo */
  padding: 1em;
}

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

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

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover,
.submenu:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
  bottom: 100%;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

.submenu {
  padding: 12px 16px;
}

.submenu-content {
  display: none;
}

.submenu-content a {
  padding: 12px 0;
}

.submenu:hover .submenu-content {
  display: block;
}

<div class="dropdown">
  <button class="dropbtn">^</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
What I would like to do is this:

<div class="dropdown">
  <button class="dropbtn">^</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <div class="submenu">Link 2
      <div class="submenu-content">
        <a href="#">SubLink 1</a>
      </div>
    </div>
    <a href="#">Link 3</a>
  </div>
</div>

you got a div with an href ;), same method as mine, but without the "side" menu — Neil, Aug 31 '17 at 15:39
@Neil well spotted, I've removed that.. thanks! Yes, same method, only way to do it really :) — sol, Aug 31 '17 at 15:42

score 0 · Answer 3 · answered Aug 31 '17 at 16:55

This is the code I ended up using and works best for my situation:

<style>

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 0px;
    font-size: 12px;
    border: none;
    cursor: pointer;
}

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

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

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
    display: block;
    bottom: 100%;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

.subdiv {
    display:none;
}

.dropdown:hover .subdiv {
    display:block;
}

.submenu {
  display:none;
  position:absolute;
  left:86px;
  top:0px;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.submenu_holder:hover .submenu {
  display:block;
}

.submenu_holder {
  position:relative;
}

</style>


<div class="dropdown">
  <button class="dropbtn">^</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <div class="submenu_holder">
      <a href="#">Link 2</a>
      <div class="submenu">
        <a href="#">SubLink 1</a>
      </div>
    </div>
    <a href="#">Link 3</a>
  </div>
</div>

Show DIV submenu dropdown when hovering

3 Answers3

Linked