DarkxPunk Posted June 4, 2017 Share Posted June 4, 2017 Hey there, So I am rebuilding a clients website and wanted to change something about the menu bar... Currently the sub menus are all the same width, I wanted the width to match the largest item in the sub menu, but having a weird issue. Here is the code: HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="Sunburst Beta"> <base href=""> <title>Sunburst</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="css/default.css" type="text/css" media="screen" charset="utf-8"/> </head> <body> <header> <div class="wrap"> <div class="split"></div> <div class="split"></div> <div class="split"></div> </div> </header> <nav> <ul> <li><a href="">Home</a></li> <li> <a href="">About Us</a> <ul> <li><a href="">President's Letter</a></li> <li><a href="">Shipping & Payment</a></li> <li><a href="">Guarantee</a></li> <li><a href="">Privacy Policy</a></li> <li><a href="">Terms & Conditions</a></li> <li><a href="">Disclaimer</a></li> </ul> </li> <li> <a href="">Diamonds</a> <ul> <li><a href="">Colour</a></li> <li><a href="">Clarity</a></li> <li><a href="">Cut</a></li> <li><a href="">Carat</a></li> <li><a href="">Certified</a></li> <li><a href="">5Cs</a></li> </ul> </li> <li><a href="">Gold</a></li> <li><a href="">Why Invest</a></li> <li><a href="">Members Only</a></li> <li><a href="">Contact Us</a></li> </ul> </nav> <section></section> <footer></footer> </body> </html> CSS: * { box-sizing: border-box; font-family: sans-serif; } a { text-decoration: none; color: #ffffff; } a:hover { color: #d9d09a; } html,body { background-color: #a09999; } header,nav,section,footer { margin: 0 auto; width: 100%; } header { height: 13vw; background-color: #565353; } header .wrap { margin: 0 auto; width: 96vw; } header .split { width: 32vw; height: 13vw; float: left; background-color: #292323; } header .split:nth-child(1), header .split:nth-child(3) { background-color: #5d4d5d; } nav { background-color: #605c5c; } nav ul,nav ul li ul { margin: 0; padding: 0; list-style: none; text-align: center; } nav ul li,nav ul li ul li { display: inline-block; position: relative; } nav ul li a,nav ul li ul li a { padding: 0.8vw 1vw 0.5vw; display: inline-block; text-transform: uppercase; font-size: 1.6vw; white-space: nowrap; } nav ul li:hover ul { } nav ul li ul { position: absolute; text-align: left; display: inline-block; top: 3.05vw; /* left: 0; */ } nav ul li ul li { width: 100%; } nav ul li ul li a { width: 100%; border: 1px solid #000000; border-top: 0.1vw solid #4c4c4c; text-transform: capitalize; background-color: #605c5c; } If you notice at the moment I am achieving what I want, except the menu is to the right of the parent. So the obvious way to fix that is set left: 0; as you will notice its commented out right now. If you set it to left: 0; the ul widens to the size of the parent! I can't figure out why this is happening or how to resolve it. Hope someone has an idea. Thanks! Link to comment Share on other sites More sharing options...
Ingolme Posted June 4, 2017 Share Posted June 4, 2017 It might have something to do with explicitly setting the width of <li> and <a> elements to 100%. Link to comment Share on other sites More sharing options...
DarkxPunk Posted June 4, 2017 Author Share Posted June 4, 2017 Well that is necessary to have those elements fill the ul so the max width is the size of the largest menu item. But I can't understand why the ul is sizing to 100% of an unassociated element. Link to comment Share on other sites More sharing options...
dsonesuk Posted June 5, 2017 Share Posted June 5, 2017 (edited) ???? What I see is the second submenu overlapping the rest of the first menu. Its not restricted to width of parent, its just hidden from view by second submenu. Wait I see what you mean Edited June 5, 2017 by dsonesuk Link to comment Share on other sites More sharing options...
dsonesuk Posted June 5, 2017 Share Posted June 5, 2017 It is a combination of using display:iinline-block and box border, if you use left: auto; it shrinks to content, but you have the problem of forcing it left. I suggest trying display: block; and floating for submenus. Link to comment Share on other sites More sharing options...
dsonesuk Posted June 5, 2017 Share Posted June 5, 2017 Yes! using display: block; instead of display: inline-block; for submenu ul fixes this issue, you can then use left: 0; <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="Sunburst Beta"> <base href=""> <title>Sunburst</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="css/default.css" type="text/css" media="screen" charset="utf-8"/> <style> * { box-sizing: border-box; font-family: sans-serif; } a { text-decoration: none; color: #ffffff; } a:hover { color: #d9d09a; } html,body { background-color: #a09999; } header,nav,section,footer { margin: 0 auto; width: 100%; } header { height: 13vw; background-color: #565353; } header .wrap { margin: 0 auto; width: 96vw; } header .split { width: 32vw; height: 13vw; float: left; background-color: #292323; } header .split:nth-child(1), header .split:nth-child(3) { background-color: #5d4d5d; } nav { background-color: #605c5c; } nav ul,nav ul li ul { margin: 0; padding: 0; list-style: none; text-align: center; } nav ul li,nav ul li ul li { display: inline-block; position: relative; } nav ul li a,nav ul li ul li a { padding: 0.8vw 1vw 0.5vw; display: inline-block; text-transform: uppercase; font-size: 1.6vw; white-space: nowrap; } nav ul li:hover ul { } nav ul li ul { position: absolute; text-align: left; display: inline-block; top: 3.05vw; left: 0; } nav ul li ul li { /*width: 100%;*/ display: block; } nav ul li ul li a { width: 100%; border: 1px solid #000000; border-top: 0.1vw solid #4c4c4c; text-transform: capitalize; background-color: #605c5c; } </style> </head> <body> <header> <div class="wrap"> <div class="split"></div> <div class="split"></div> <div class="split"></div> </div> </header> <nav> <ul> <li><a href="">Home</a></li> <li> <a href="">About Us</a> <ul> <li><a href="">President's Letter</a></li> <li><a href="">Shipping & Payment</a></li> <li><a href="">Guarantee</a></li> <li><a href="">Privacy Policy</a></li> <li><a href="">Terms & Conditions</a></li> <li><a href="">Disclaimer</a></li> </ul> </li> <li> <a href="">Diamonds</a> <ul> <li><a href="">Colour</a></li> <li><a href="">Clarity</a></li> <li><a href="">Cut</a></li> <li><a href="">Carat</a></li> <li><a href="">Certified</a></li> <li><a href="">5Cs</a></li> </ul> </li> <li><a href="">Gold</a></li> <li><a href="">Why Invest</a></li> <li><a href="">Members Only</a></li> <li><a href="">Contact Us</a></li> </ul> </nav> <section></section> <footer></footer> </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