DarkxPunk Posted December 30, 2012 Share Posted December 30, 2012 Hey everyone, I made a nav bar with a drop down menu, but I want to add a second level and I do not know how I could achieve it. Every time I try it either overlaps or shows under the li. What I would like to see is it kinda come out the side, but the problem I see with that is I would have to calculate the exact width for the second level to nudge for each menu which is impractical. Thanks for any help. <!doctype html><html><head><title>Menu</title><style>/* Styling */#nav, #nav ul {margin: 0;padding: 0;overflow: hidden;list-style: none;}#nav a {text-decoration: none;color: #000000;}#nav,#nav li,#nav li ul li {border: 1px solid #cccccc;border-width: 1px 0;}#nav ul {position: absolute;}#nav li {padding: 5px;border-width: 0 1px 0 0;float: left;background: #f2f2f2;}#nav li ul {overflow: visible;margin: 0 0 0 -6px;padding: 6px 0 0 0;display: none;}#nav li ul li {min-width: 60px;padding: 3px 10px;border-width: 0 1px 0;float: none;text-align: center;}#nav li ul li:last-child {border-width: 0 1px 1px;}/* Hovering */#nav li:hover ul {display: block;}#nav li:hover li:hover {background: #ffffff;}#nav li:hover {background: #ffffff;}</style></head><body><ul id="nav"><li><a href="#">Home</a></li><li><a href="#">Projects</a><ul><li><a href="#">Future</a></li><li><a href="#">Present</a></li><li><a href="#">Past</a></li></ul></li><li><a href="#">Services</a><ul><li><a href="#">Services 1</a></li><li><a href="#">Services 2</a></li><li><a href="#">Services 3</a></li></ul></li><li><a href="#">Information</a><ul><li><a href="#">Information 1</a></li><li><a href="#">Information 2</a></li><li><a href="#">Information 3</a></li></ul></li><li><a href="#">Contact</a><ul><li><a href="#">Phone</a></li><li><a href="#">Email</a></li><li><a href="#">Text</a></li></ul></li></ul></body></html> Link to comment Share on other sites More sharing options...
davej Posted December 31, 2012 Share Posted December 31, 2012 I've never dug into that topic but it is certainly the focus of a lot of design articles, such as... http://www.hongkiat.com/blog/drop-down-menu-30-free-scripts-to-enhance-header-navigation/ Link to comment Share on other sites More sharing options...
dsonesuk Posted January 1, 2013 Share Posted January 1, 2013 You have to target the 2nd submenu on hover of top row li parent and hide it, and only show if 2nd submenu parent (1st submenu li) is hovered similar to #nav li:hover ul { /*top row parent hover show all ul children within it*/display: block;}#nav li:hover li ul {/*top row parent hover hide all ul children within 1st submenu parent*/display: none;}#nav li li:hover ul {/*1st submenu parent hover show all ul children within it*/display: block;} You would normally use posotion relative for ALL li elements, and position: absolute for UL element that are children of li only (not target parent ul#nav), and use property left 100% to force to right edge of submenu whatever width it maybe, and top property to position in line to parent submenu. #nav li:hover li:hover = invalid, you can only target one element for hover at one time Link to comment Share on other sites More sharing options...
DarkxPunk Posted January 1, 2013 Author Share Posted January 1, 2013 I started all over and got to here: <!doctype html><html><head><title>Menus</title><style>#nav * {margin: 0;padding: 0;list-style: none;border: 1px solid #000000;display: block;}#nav ul {border-width: 1px 0;}#nav li {padding: 10px;}#nav > ul {overflow: hidden;}#nav > ul > li {border-width: 0 1px 0 0;float: left;}#nav ul li ul {margin: 10px 0 0;position: absolute;}#nav .sub li {border-width: 0 1px;}#nav .sub {min-width: 100px;}</style></head><body><div id="nav"><ul><li>Home</li><li>Projects<ul class="sub"><li>Future</li><li>Present<ul class="sub"><li>Future</li><li>Present</li><li>Past<ul class="sub"><li>Future</li><li>Present</li><li>Past</li></ul></li></ul></li><li>Past</li></ul></li></ul></div></body></html> My problem is this. When I try to position absolute the uls and relative the lis the overflow hidden screws up forcing the first ul to not do the full width border top/bottom. I want this menu bar to be fully adjustable without changing the css, just the content so no values can really be fixed. How can I from where I am push the sub menus into the positions. I tried changing to the top and left to % but its not locking to the li its locking to the ul (UGH). Now note I have gone through at least 5/6 tutorials fully and combed through others and none of them achieve what I am trying to do, its filled with junk code or when I try to style it, it just falls apart. I want to understand nav bar construction to its fullest. Thanks for any further help. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 1, 2013 Share Posted January 1, 2013 Using overflow: hidden; is not really pratical as the submenus will show outside the overflow: hidden; element and therefore will be hidden, alternatively use float instead, as this will shrink to the content within it, even if they are floated also, which is why i gather? you used overflow; hidden; #nav ul li ul {margin: 10px 0 0;position: absolute;} Above only targets 2nd submenu and beyond, you need it target 1st submenu and beyond, and you should apply postion relative to all LI elements, and i suggest you apply padding to anchor elements only, as if you apply padding to position relative li elements, the UL elements postion themselves to area of li element NOT including padding. Applying to anchor forces the LI area width to expand so left:0; will be flush to left edge of LI, left:100%, flush with right edge of LI, if you wish a overlap to occur use negative margin example margin-left:-4px; on 2nd submenu UL elements. so are looking for something similar to this #nav ul {/* #nav is outermost UL parent, you then target all child UL within it */position: absolute;} #nav li {border-width: 0 1px 0 0;float: left;background: #f2f2f2;position: relative;} #nav li li a {padding: 3px 10px;} Link to comment Share on other sites More sharing options...
Labtec Posted January 1, 2013 Share Posted January 1, 2013 (edited) You could use some JS/Jquery to determine the <li> x-y co-ordinates and then position your dropdown relative to that using position absolute? Of course this would make it JS dependent which I'm not sure if this is an option for you. Kind regards, Lab. Edited January 1, 2013 by Labtec Link to comment Share on other sites More sharing options...
DarkxPunk Posted January 1, 2013 Author Share Posted January 1, 2013 (edited) Using overflow: hidden; is not really pratical as the submenus will show outside the overflow: hidden; element and therefore will be hidden, alternatively use float instead, as this will shrink to the content within it, even if they are floated also, which is why i gather? you used overflow; hidden;I am confused... My goal is to have one bar that is the width of the viewport or the wrapper that has a border at the top and bottom of 1px to give separation. The only way I can get it to go 100% width and wrap around the first UL is by overflow: hidden. I will keep playing and attempt what I think you are saying. -EDIT- Well I did float left and width 100% and it worked... Guess before I had something countering it... Thanks for the tip.. -EDIT2- So, success! I managed to make a fully functioning one that is dynamic to the content. Yay! Now I will attempt to clean it more myself but I bet what I have is pretty messy. Any tips are appreciated <!doctype html><html><head><title>Menus</title><style>a {color: #000000;text-decoration: none;display: inline-block;}#nav {width: 100%;}#nav,#nav * {margin: 0;padding: 0;list-style: none;}#nav,#nav li,ul li ul {border: 1px solid #000000;border-width: 1px 0;}#nav,#nav > li {float: left;}#nav a {padding: 5px 10px;}#nav ul {position: absolute;}#nav li {border-width: 0 1px 0 0;position: relative;cursor: pointer;}ul.first {top: 100%;left: -1px;}ul li ul {border-width: 1px;top: -1px;left: 100%;}ul li ul li {border-width: 0 !important;min-width: 100px;}#nav li:hover > a,#nav li:hover {color: #ffffff;background: #000000;}#nav li ul {display: none;}#nav li:hover > ul {display: block;}</style></head><body><ul id="nav"><li><a href="#">Home</a></li><li><a href="#">Projects</a><ul class="first"><li><a href="#">Future</a><ul><li><a href="#">Future</a></li><li><a href="#">Present</a><ul><li><a href="#">Future</a></li><li><a href="#">Present</a></li><li><a href="#">Past</a><ul><li><a href="#">Future</a></li><li><a href="#">Present</a></li><li><a href="#">Past</a></li></ul></li></ul></li><li><a href="#">Past</a></li></ul></li><li><a href="#">Present</a></li><li><a href="#">Past</a></li></ul></li><li><a href="#">Contact</a></li></ul></body></html> Edited January 1, 2013 by DarkxPunk 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