eddirae 1 Posted April 22, 2020 Report Share Posted April 22, 2020 Hello, Using the "Navigation Bar with Dropdown", I am creating a dropdown under another dropdown. When you run it, the dropdown under the dropdown shows as well. How do I have it so that it doesn't show until I hover over the sub dropdown? Here is the code <!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-container"> <h2>Navigation Bar with Dropdown</h2> <p>Add a dropdown menu inside the navigation bar:</p> <div class="w3-bar w3-light-grey"> <a href="#" class="w3-bar-item w3-button">Home</a> <a href="#" class="w3-bar-item w3-button">Link 1</a> <div class="w3-dropdown-hover"> <button class="w3-button">Dropdown1</button> <div class="w3-dropdown-content w3-bar-block w3-card-4"> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> <div class="w3-dropdown-hover"> <button class="w3-button">Dropdown2</button> <div class="w3-dropdown-content w3-bar-block w3-card-4"> <a href="#" class="w3-bar-item w3-button">Link 4</a> <a href="#" class="w3-bar-item w3-button">Link 5</a> <a href="#" class="w3-bar-item w3-button">Link 6</a> </div> </div> </div> </div> </div> </div> </body> </html> Thanks in advance for your help!! Eddi Rae Quote Link to post Share on other sites
Vishal_N 0 Posted April 24, 2020 Report Share Posted April 24, 2020 Like This https://codepen.io/vishalneswankar/pen/PoPpGgo Quote Link to post Share on other sites
eddirae 1 Posted April 24, 2020 Author Report Share Posted April 24, 2020 Thanks Vishal_N for your post. I am not seeing a CSS for the w3-bar-none. Could you elaborate on this, please? Eddi Rae Quote Link to post Share on other sites
Michele Costantino 0 Posted April 25, 2020 Report Share Posted April 25, 2020 Is it possible to have link 4,5,6 on the right of of dropdown2 ? I'm fighting with this since 3 days... Quote Link to post Share on other sites
eddirae 1 Posted April 26, 2020 Author Report Share Posted April 26, 2020 Hello Vishal_N. I got your example to work as a standalone. The issue now is that I have this in a master file and it is not working. It opens all items. Quote Link to post Share on other sites
shaili_shah 4 Posted May 8, 2020 Report Share Posted May 8, 2020 On 4/25/2020 at 5:08 PM, Michele Costantino said: Is it possible to have link 4,5,6 on the right of of dropdown2 ? I'm fighting with this since 3 days... So you can use this css : position: relative; left: 100%; top: 0; Hope it'll help. Thanks! Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.