Блог

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;
}
 

Прямо сейчас у меня есть два выпадающих меню. Одно в разделе Обзор моделей, а другое в разделе Учебные пособия.

Если вы посмотрите на подменю, ширина элементов настраивается соответствующим образом в зависимости от того, что вводится. Если вы посмотрите на учебные пособия, в подменю Принтеры вы увидите Тест и Тест 2. Только в тесте 2 2 помещается под словом Тест.

По сути, подменю не настраиваются должным образом в зависимости от ширины элементов так же, как и подменю. Если бы вы ввели «Завершение модели» там, где находится тест 2, он бы сложил слова. Но пункт «Завершение модели» в подменю находится на одной строке.

Я все еще новичок в этом. Это первый раз, когда я пытаюсь создать подобное вложенное меню, я в значительной степени просто перехожу к учебным пособиям, поэтому буду признателен за любые советы.

Спасибо за ваше время.

Редактировать: изменен JSfiddle и код, чтобы отразить то, с чем я сейчас работаю.

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

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

также удалите ширину: 100% снизу

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

вам следует заглянуть в bootstrap. У него уже есть хорошее меню, чтобы вы могли сосредоточиться и заняться другими делами http://getbootstrap.com/components/#navbar

Исправил это, добавив:

 white-space: nowrap;
 

до #nav ul.