将子菜单添加到水平菜单

Adding SubSub Menu to Horizontal Menu?

本文关键字：菜单水平添加更新时间：2023-09-26

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

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

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

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>

小提琴

试试这个：

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

只需了解此代码背后的逻辑，您就可以根据需要制作任意数量的子菜单。