eddirae Posted April 22, 2020 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 Link to comment Share on other sites More sharing options...
Vishal_N Posted April 24, 2020 Share Posted April 24, 2020 Like This https://codepen.io/vishalneswankar/pen/PoPpGgo Link to comment Share on other sites More sharing options...
eddirae Posted April 24, 2020 Author 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 Link to comment Share on other sites More sharing options...
Michele Costantino Posted April 25, 2020 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... Link to comment Share on other sites More sharing options...
eddirae Posted April 26, 2020 Author 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. Link to comment Share on other sites More sharing options...
shaili_shah Posted May 8, 2020 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! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now