oZorNick Posted November 11, 2019 Share Posted November 11, 2019 Good afternoon! Please help me. Menu 4 does not open correctly. What is wrong with the css code? https://www.w3schools.com/code/tryit.asp?filename=G9TT8UGP1E73 Link to comment Share on other sites More sharing options...
JMRKER Posted November 15, 2019 Share Posted November 15, 2019 Here is one very similar that works as you want. Compare codes for inspiration. <!DOCTYPE html><html lang="en"><head><title> Horizontal Drop-down Menu </title> <meta charset="UTF-8"> <meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/> <!-- Modified from: https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar also: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar_click --> <style> ul { width: 800px; list-style-type: none; margin: 0 auto; padding: 0; overflow: hidden; background-color: wheat; } li { float: left; } li a, .dropbtn { display: inline-block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: lime; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: wheat; min-width: 160px; 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; text-align: left; } .dropdown-content a:hover {background-color: lime;} .dropdown:hover .dropdown-content { display: block; } .toRight { float: right; } </style> </head> <body> <ul> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn">Home</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> <li><a href="#news">News</a></li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn">Dropdown 1</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn">Dropdown 2</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn">Dropdown 3</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> <li class="dropdown toRight"> <a href="#" class="right">Enter</a> </li> </ul> <h3>Dropdown Menu inside a Navigation Bar</h3> <p>Hover over the "Dropdown" link to see the dropdown menu.</p> </body> </html> 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