0

http://jsfiddle.net/KsR5K/

#nav {
position: absolute;
font-family: digital_techregular;
font-size: 24px;
}

#nav ul ul {
display: none;
}

#nav ul li:hover > ul {
display:block
}

#nav ul {
background: #000;
list-style: none;
position: relative;
padding: 0px;
}

#nav ul:after {
content:"";
clear:both;
display:block
}

#nav ul li {
float:left
}

#nav ul li:hover {
background: #757575;
}

#nav ul li:hover a {
color:#fff
}

#nav ul li a {
display:block;
padding-top: 3px;
padding-left: 20px;
padding-right:20px;
color:#fff;
text-decoration:none
}

#nav ul ul {
background: #000;
padding:0;
position:absolute;
top:100%
}

#nav ul ul li {
float:none;
position:relative
}

#nav ul ul ul {
position:absolute;
left:100%;
top:0;
}

#nav ul ul li a {
padding-left: 20px;
padding-right: 20px;
color:#fff
}

#nav ul ul li a:hover {
background:#757575;
}

Right now, I have two drop down menus. One under Browse Models, and another under Tutorials.

If you look at the sub menus, the items' widths adjust accordingly depending on what is typed. If you look at tutorials, under the Printers sub menu, you will see Test, and Test 2. Only on Test 2, the 2 is placed underneath the word Test.

Basically, the sub sub menus aren't properly adjusting based on the width of the items in the same way that the sub menus are. If you were to type "Model Finishing" where Test 2 is, it would stack the words. But the "Model Finishing" item in the sub menu is all on one line.

I'm still pretty new at this. This is the first time I've tried to create a nested menu like this, I'm pretty much just going off of tutorials, so any advice would be appreciated.

Thanks for your time.

Edit: Changed the JSfiddle and code to reflect what I'm currently working with.

2 Answers 2

1

http://jsfiddle.net/S5cYJ/6/

#nav ul ul ul {
   /* add this */
   width:100%;
}

also remove width:100% from below

#nav ul ul li a {
 padding: 15px 40px;
 color: #fff;
 display:block;
}   

you should look into bootstrap. It has a nice menu already built so that you can concentrate and doing other things http://getbootstrap.com/components/#navbar

1
  • Thanks for the reply. If I change the width to 100%, on mine, all it does is make it as wide as the parent menu. I'd like it to behave as the rest of the list items do, with only 40px of padding on the left and the right, with the full widths of the boxes only growing as necessary. Any ideas there? Commented Jun 27, 2014 at 2:50
1

Fixed this by adding:

white-space: nowrap;

to #nav ul.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.