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

现在，我有两个下拉菜单。一个在Browse Models下，另一个在Tutorials下。

如果查看子菜单，项目的宽度会根据输入的内容进行相应调整。如果您查看教程，请在“打印机”子菜单下看到“测试”和“测试2”。仅在测试2上，2位于“测试”一词下方。

基本上，子子菜单没有按照与子菜单相同的方式根据项目的宽度进行适当调整。如果您要输入测试2所在的“模型完成”，它将堆叠单词。但是子菜单中的“模型精加工”项目都在一行上。

我还是很陌生。这是我第一次尝试创建这样的嵌套菜单，我几乎只是偏离教程，所以任何建议都会受到赞赏。

感谢您的时间。

编辑：更改了JSfiddle和代码，以反映我目前正在使用的内容。

Answer 1

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

Answer 2

通过添加：

解决了这个问题

white-space: nowrap;

到#nav ul。

子子菜单宽度不自动调整？

2 个答案: