Sub sub menus widths aren't auto adjusting? - html

Question

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.

Answer 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

Answer 2

Fixed this by adding:
white-space: nowrap;
to #nav ul.