Show DIV submenu dropdown when hovering

问题

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.

回答1:

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>

回答2:

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>

回答3:

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>

来源：https://stackoverflow.com/questions/45984685/show-div-submenu-dropdown-when-hovering

标签

css

drop-down-menu

hover