Question

我想添加第三个子菜单，只有2个子菜单。。但我有点困惑。。。请帮助我吧。。我的html和css代码位于JS小提琴http://jsfiddle.net/xZKE8/

中的链接中

我现在拥有的是

Ex：ProductA＆gt;产品1＆gt;子产品1

我需要的是

Ex：ProductA＆gt;产品1＆gt;子产品1＆gt;子产品1_1

<div id="menuwrapper">
<ul>
 <li><a href="#" Title="Products A" >Products A</a>
<ul>
 <li><a href="#" Title="Product 1">Product 1</a>
<ul>
 <li><a href="#" Title="Sub Product 1">Sub Product 1</a></li>
 <li><a href="#" Title="Sub Product 2">Sub Product 2</a></li>
 <li><a href="#" Title="Sub Product 3">Sub Product 3</a></li>
 <li><a href="#" Title="Sub Product 4">Sub Product 4</a></li>
 <li><a href="#" Title="Sub Product 5">Sub Product 5</a></li>
</ul>   
 </li>
</ul>   
 </li>
</ul>
</div>

Answer 1

在ul中添加另一个<li><a href="#" Title="Sub Product 1">Sub Product 1</a></li>并根据需要添加li，然后使用id #menuwrapper ul ul ul ul设置样式，或者您可以像这样设置{ {1}}我觉得它会奏效。如果不能告诉。

我已经更新了你的小提琴。请检查一下：http://jsfiddle.net/xZKE8/4/。我刚刚添加了两行CSS。

#menuwrapper ul:nth-child(3)

Answer 2

正如Joy_S所说，你可以根据需要嵌套尽可能多的<ul>。

对于CSS，原始代码以低效的方式显示隐藏的子级别。相反，对每个子菜单使用#menuwrapper ul li ul li ul li ul ...等等等，只需使用一个选择器为每个li取消隐藏只使用>的直接子ul。

 #menuwrapper ul li:hover > ul, 
 #menuwrapper ul li.iehover > ul{
     left:175px;
     top:0px;
     display:block;
 }

这一个块适用于任意数量子菜单的每个菜单项。

fiddle

我摆脱了所有多余的CSS，以显示制作此类菜单功能所不必要的内容。

添加第3个子菜单

2 个答案: