0

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.

Improve this question

3 Answers 3

Reset to default
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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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>

Improve this answer

2 Comments

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

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>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.