将SubSub菜单添加到水平菜单？ [英] Adding SubSub Menu to Horizontal Menu?
本文介绍了将SubSub菜单添加到水平菜单？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在这个已经创建的横向菜单中获得子菜单，但我没有运气。我想将子菜单悬停在子菜单部分的右侧，当有人悬停在子菜单部分时，然后在子菜单项上没有悬停时隐藏。
有可能获得另一个子菜单项到这些子菜单项吗？
我很难做这个。以下是我到目前为止的代码：
http： //jsfiddle.net/ndn4life104/pp5Mf/
HTML
< ul> < li>< a href =＃>菜单1< / a> < div class =primary-nav-sub-menu-2> < ul class =column>
< li>< a href =＃>子菜单< / a>< / li>
< li>< a href =＃> part1< / a>< / li>
< li>< a href =＃> part2< / a>< / li>
< li>< a href =＃> part3< / a>< / li>
< li>< a href =＃> part4< / a>< / li>
< / ul>
< ul class =column>
< li>< a href =＃> part5< / a>< / li>
< li>< a href =＃> part6< / a>< / li>
< li>< a href =＃> part7< / a>< / li>
< li>< a href =＃> part8< / a>< / li>
< / ul>< / div> < / li>< / ul>
解决方案
请尝试：
HTML：
< head>< link rel = type =text / csshref =m.css>< / head>
< div id =top_menu>
< ul>
< li class =first> menu1
< div id =submenu>
< ul class =abc>
< li class =second> item1
< div id =submenu2>
< ul class =abc>
< li class =second> item1_1
< div id =submenu3>
< ul class =abc>
< li class =second> item1_1_1< / li>
< li class =second> item1_1_2< / li>
< li class =second> item1_1_3< / li>
< / ul>
< / div>
< / li>
< li class =second> item1_2< / li>
< li class =second> item1_3< / li>
< / ul>
< / div>
< / li>
< li class =second> item2
< div id =submenu2>
< ul class =abc>
< li class =second> item2_1< / li>
< li class =second> item2_2< / li>
< li class =second> item2_3< / li>
< / ul>
< / div>
< / li>
< li class =second> item3
< div id =submenu2>
< ul class =abc>
< li class =second> item3_1< / li>
< li class =second> item3_2< / li>
< li class =second> item3_3< / li>
< / ul>
< / div>
< / li>
< / ul>
< / div>
< / li>
< li class =first> menu2
< div id =submenu>
< ul class =abc>
< li class =second> item1< / li>
< li class =second> item2< / li>
< li class =second> item3< / li>
< li class =second> item4< / li>
< / ul>
< / div>
< / li>
< / ul>
< / div>
CSS：
ul {
padding：10px;
padding-right：0px;
}
li.first {
display：block;
display：inline-block;
padding：5px;
padding-right：25px;
padding-left：25px;
cursor：pointer;
}
li.second {
list-style：none;
margin：0px;
padding：5px;
padding-right：25px;
margin-bottom：5px;
cursor：pointer;
}
#submenu li.second：hover {
background：red;
border-radius：5px;
}
＃submenu2 li.second：hover {
background：green;
border-radius：5px;
}
/ *********主要逻辑*************** /
＃子菜单，＃submenu2 ，＃submenu3 {
visibility：hidden;
}
#top_menu li.first：hover＃submenu，＃submenu li.second：hover＃submenu2，＃submenu2 li.second：hover＃submenu3 {
visibility：visible;
}
/ ********** STYLING SUBMENUS ************** /
#submenu {
padding- right：0px;
text-align：left;
position：absolute;
background：white;
box-shadow：0px 0px 5px;
border-radius：5px;
}
＃submenu2 {
text-align：left;
position：absolute;
left：70px;
top：0px;
background：red;
box-shadow：0px 0px 5px;
border-radius：5px;
}
＃submenu3 {
text-align：left;
position：absolute;
left：80px;
top：0px;
background：green;
box-shadow：0px 0px 5px;
border-radius：5px;
}
只是理解了这个代码的逻辑，你可以创建尽可能多的子菜单
I'm trying to get a subsub menu in this already created horizontal menu I have but am having no luck on doing so. I want the subsub menu to hover over to the right of the submenu portion when someone hovers over it and then hide when there is no hover over the submenu item.
Also is it possible to get another subsubsub menu to those subsub menu items?
I'm having a hard time doing this. Here are the codes I have so far:
http://jsfiddle.net/ndn4life104/pp5Mf/
HTML
<ul> <li><a href="#">Menu 1</a> <div class="primary-nav-sub-menu-2"> <ul class="column"> <li><a href="#">Submenu</a></li> <li><a href="#">part1</a></li> <li><a href="#">part2</a></li> <li><a href="#">part3</a></li> <li><a href="#">part4</a></li> </ul> <ul class="column"> <li><a href="#">part5</a></li> <li><a href="#">part6</a></li> <li><a href="#">part7</a></li> <li><a href="#">part8</a></li> </ul></div> </li></ul>
解决方案try this:
HTML:
<head><link rel="stylesheet" type="text/css" href="m.css"></head> <div id="top_menu"> <ul> <li class="first">menu1 <div id="submenu"> <ul class="abc"> <li class="second">item1 <div id="submenu2"> <ul class="abc"> <li class="second">item1_1 <div id="submenu3"> <ul class="abc"> <li class="second">item1_1_1</li> <li class="second">item1_1_2</li> <li class="second">item1_1_3</li> </ul> </div> </li> <li class="second">item1_2</li> <li class="second">item1_3</li> </ul> </div> </li> <li class="second">item2 <div id="submenu2"> <ul class="abc"> <li class="second">item2_1</li> <li class="second">item2_2</li> <li class="second">item2_3</li> </ul> </div> </li> <li class="second">item3 <div id="submenu2"> <ul class="abc"> <li class="second">item3_1</li> <li class="second">item3_2</li> <li class="second">item3_3</li> </ul> </div> </li> </ul> </div> </li> <li class="first">menu2 <div id="submenu"> <ul class="abc"> <li class="second">item1</li> <li class="second">item2</li> <li class="second">item3</li> <li class="second">item4</li> </ul> </div> </li> </ul> </div>CSS:
ul{ padding:10px; padding-right:0px; } li.first{ display:block; display:inline-block; padding:5px; padding-right:25px; padding-left:25px; cursor:pointer; } li.second{ list-style:none; margin:0px; padding:5px; padding-right:25px; margin-bottom:5px; cursor:pointer; } #submenu li.second:hover{ background:red; border-radius:5px; } #submenu2 li.second:hover{ background:green; border-radius:5px; } /*********MAIN LOGIC***************/ #submenu,#submenu2,#submenu3{ visibility:hidden; } #top_menu li.first:hover #submenu,#submenu li.second:hover #submenu2,#submenu2 li.second:hover #submenu3{ visibility:visible; } /**********STYLING SUBMENUS**************/ #submenu{ padding-right:0px; text-align:left; position:absolute; background:white; box-shadow:0px 0px 5px; border-radius:5px; } #submenu2{ text-align:left; position:absolute; left:70px; top:0px; background:red; box-shadow:0px 0px 5px; border-radius:5px; } #submenu3{ text-align:left; position:absolute; left:80px; top:0px; background:green; box-shadow:0px 0px 5px; border-radius:5px; }just understand the logic behind this code and you can made as much submenus as you want.
这篇关于将SubSub菜单添加到水平菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
