Adding SubSub Menu to Horizontal Menu?

问题

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:

FIDDLE

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.

来源：https://stackoverflow.com/questions/19063248/adding-subsub-menu-to-horizontal-menu

标签

javascript

html

css

submenu