将 SubSub 菜单添加到水平菜单？答案

【问题标题】：Adding SubSub Menu to Horizontal Menu?将 SubSub 菜单添加到水平菜单？
【发布时间】：2013-10-04 11:42:53
【问题描述】：

我试图在这个已经创建的水平菜单中获得一个子菜单，但我没有这样做。当有人将鼠标悬停在子菜单部分的右侧时，我希望子菜单悬停在子菜单部分的右侧，然后在子菜单项上没有悬停时隐藏。

还有可能为这些子子菜单项获得另一个子子子菜单吗？

我很难做到这一点。这是我到目前为止的代码：

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>

【问题讨论】：

标签： javascript html css menu submenu

【解决方案1】：

FIDDLE

试试这个：

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;
}

只要理解这段代码背后的逻辑，你就可以制作尽可能多的子菜单。

【讨论】：