Manny Posted January 9, 2017 Share Posted January 9, 2017 Hi guys, I'm developing a CMS for one of my sites and am trying out a vertical navigation to the left of the screen. I've got it to display as intended, with the exception of one thing. I basically want one long vertical list with sub-menu below it's parent, with the next parent directly underneath the aforementioned sub-menu. Here's what I have so far: <ul> <li> <a href="#">Parent</a> <ul> <li>Sub-item</li> <li>Sub-item</li> </ul> </li> <li><a href="#">Parent</a></li> <li><a href="#">Parent</a></li> <li><a href="#">Parent</a></li> </ul> ul { width: 250px; } ul > li { position: relative; width: 100%; height: 40px; line-height: 40px; border-bottom: 1px solid #999; } ul > li > a { display: block; width: 100%; padding: 0 20px; } ul > li > ul { position: absolute; width: 100%; background-color: #F00; } At present, the sub-menu items do fall below the parent, but the next parent item then goes directly over the top of the aforementioned sub-menu. Any help would be much appreciated. Link to comment Share on other sites More sharing options...
DarkxPunk Posted January 16, 2017 Share Posted January 16, 2017 Couple things screwed up what you were doing... Did you build this step by step and watch what happened as you built it? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content=""> <base href=""> <title></title> <style> ul { width: 250px; background-color: red; } ul li { line-height: 40px; border-bottom: 1px solid #000000; } ul li a { display: block; padding: 0 20px; } ul li ul { background-color: green; } </style> </head> <body> <ul> <li> <a href="">Parent</a> <ul> <li>Sub-Item</li> <li>Sub-Item</li> </ul> </li> <li> <a href="">Parent</a> </li> <li> <a href="">Parent</a> </li> <li> <a href="">Parent</a> </li> </ul> </body> </html> The height restricts the sub items from appearing causing overlap, then the position absolute causing all the flowing to overlap as well. Hope this puts you on the right track. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 16, 2017 Share Posted January 16, 2017 Setting of height and line-height is usually used to vertically align link text in middle, so it should be set to anchor element (requires sub-items text to be within anchor link element). 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