Adding SubSub Menu to Horizontal Menu?
Question
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>
1 answers
solution1
0 2013-10-02 12:25:59
try this:
<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>
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.