ryanstua 0 Report post Posted November 13, 2018 Not sure if this is the right place however I am trying to build, using HTML/CSS, a menu where items are arranged horizontally. One of the menu items, when clicked, opens a drop down menu. This sub menu is 100% wide aligned from the left edge of the page and will contain additional links. these links are arranged in columns and I want there to be 3 columns. Any help on this would be very much appreciated. Quote Share this post Link to post Share on other sites
JMRKER 9 Report post Posted November 13, 2018 Can you provide an HTML example of the layout of the elements you are trying to include in your request? I'm unclear as to the requirements. Quote Share this post Link to post Share on other sites
dsonesuk 896 Report post Posted November 13, 2018 (edited) Its called a mega-menu https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_mega_menu_responsive Edited November 13, 2018 by dsonesuk Quote Share this post Link to post Share on other sites
ishan_shah 1 Report post Posted February 13 Hey @ryanstua, You can do something like that: Html: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="navbar"> <div class="dropdown"> <button class="dropbtn">Menu <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <h3>Category 1</h3> <a href="#">Link A</a> <a href="#">Link B</a> <a href="#">Link C</a> </div> <div class="column"> <h3>Category 2</h3> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> <div class="column"> <h3>Category 3</h3> <a href="#">Link X</a> <a href="#">Link Y</a> <a href="#">Link Z</a> </div> </div> </div> </div> <a href="#home">Home</a> <a href="#news">About Us</a> </div> </body> </html> And css: * { box-sizing: border-box; } body { margin: 0; } .navbar { overflow: hidden; background-color: #333; font-family: Arial, Helvetica, sans-serif; } .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font: inherit; margin: 0; } .navbar a:hover, .dropdown:hover .dropbtn { background-color: red; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; width: 100%; left: 0; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content .header { background: red; padding: 16px; color: white; } .dropdown:hover .dropdown-content { display: block; } .column { float: left; width: 33.33%; padding: 10px; background-color: #ccc; height: 250px; } .column a { float: none; color: black; padding: 16px; text-decoration: none; display: block; text-align: left; } .column a:hover { background-color: #ddd; } .row:after { content: ""; display: table; clear: both; } Quote Share this post Link to post Share on other sites
