2013-11-26 2 views
0

Мне нравится добавлять третье подменю, есть только 2 подменю. , но я немного смущен. , .Пожалуйста, помогите мне с этим, ребята. , Мой HTML и код CSS в ссылке ниже в JS скрипку http://jsfiddle.net/xZKE8/Добавление третьего подменю

То, что я сейчас

Ex: ProductA> Продукт 1> Sub продукт 1

Что мне нужно

Пример: ProductA> продукт 1> Sub продукт 1> Sub продукт 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> 

ответ

1

Добавить еще ul внутри <li><a href="#" Title="Sub Product 1">Sub Product 1</a></li> и добавьте столько же li, сколько хотите, тогда создайте его с помощью id#menuwrapper ul ul ul ul или вы можете так стилизовать #menuwrapper ul:nth-child(3), и я думаю, это сработает. Если потом не скажешь.

Я обновил вашу скрипку. Пожалуйста, проверьте его: http://jsfiddle.net/xZKE8/4/. Я добавил только два строчных CSS с вашими ».

#menuwrapper ul li ul li ul li ul li{display:none;} 
#menuwrapper ul li ul li ul li:hover > ul li{display:block !important;} 
+0

Ya Joy. , проблема с моим стилем. , . можете отредактировать скрипку и показать мне – Zain

1

Как указано Joy_S, вы просто гнездо, как много <ul> «s, как вам нужно.

Что касается CSS, то исходный код показывает недействительный скрытый уровень. Скорее, используя #menuwrapper ul li ul li ul li ul ... blah blah blah для каждого отдельного подменю, просто используйте один селектор для каждого li, чтобы показывать ТОЛЬКО прямое дочернее ul, используя >.

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

Этот блок будет работать над каждым пунктом меню для любого количества подменю.

fiddle

Я иду избавиться от всех лишних CSS, чтобы показать, что не является необходимым, чтобы сделать этот тип функции меню.

Смежные вопросы