Adding SubSub Menu to Horizontal Menu?

2019-05-21 20:57发布

站内问答 / JavaScript
845 1 4

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条回答
成全新的幸福
2楼-- · 2019-05-21 21:26

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)