CODEWITHSUNDEEP
htmlcssdropdownonhover
Tar270
Tar270

Reputation: 77

Sub-submenu should open on hover

'data2' should be shown only on hover of SubSubmenu1, But it opens while hovering on SubMenu1 itself (along with data1 and subsubmenu1 dropdown). Can anyone guide me how to make it(data2) open only when hovered on SubSubmenu1. Thank you.

<div class="collapse navbar-collapse" id="myNavbarToggler4">
    <ul class="navbar-nav">
        <!-- menu item-->
        <li class="nav-item"><a class="nav-link" href="indexpage">Mainmenuitem1</a></li>
        <!-- menu item-->
        <li class="has-dropdown">
            <a href="#.html">Mainmenuitem2</a>

            <ul>                      
                <li class="dropdown-submenu">
                    <!-- submenus -->
                    <a style="background-color: grey; margin-right: 100px" href="#" class="dropdown-toggle"
                       data-toggle="dropdown">SubMenu1</a>
                    <div id="SM1" style="margin-right:100px;" aria-labelledby="navbarDropdown">

                        <ul class="dropdown">
                            <li class="dropdown-item">
                                <input type="checkbox" id="data1" data-id=0 checked>
                                <label for="data1">data1</label>
                            </li>
                            <li class="dropdown-subsubmenu">
                                <!-- with submenu -->
                                <a style="background-color: grey; margin-right: 100px" href="#" class="dropdown-toggle"
                                   data-toggle="dropdown">SubSubMenu1</a>
                                <div id="SubSubMenudata" style="margin-right:100px;" aria-labelledby="navbarDropdown">
                                    // this dropdown opens when I hover on SubMenu1.
                                    // Should open only when I hover on SubSubMENU1
                                    <ul style="background-color: grey;" class="dropdown">
                                        <li class="dropdown-item">
                                            <input type="checkbox" id="d2" data-id=0 checked>
                                            <label for="d2">data2</label>
                                        </li>                                        
                                    </ul>
                                </div>
                            </li>
                        </ul>

                    </div>
                </li>               
            </ul>

        </li>
    </ul>
</div>

Below is the CSS.

ul ul li:hover ul,
ul li:hover > ul {
    opacity: 1;
    visibility: visible;
}

.dropdown {
    z-index: 1002;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 14px; 
}

Upvotes: 1

Views: 807

Answers (3)

Elly
Elly

Reputation: 55

Below is an CSS only example aswell if you dont want to use the java script example i posted.

Just click the "Run Snippet" button to test it.

* {
    font-family: sans-serif;
}

#horizontalmenu ul {
    list-style: none;
    padding: 0;
}

#horizontalmenu>ul>li {
    float: left;
    position: relative;
    border: 1px solid #555555;
    border-radius: 3px;
    background-color: #383838;
}

#horizontalmenu>ul>li>a {
    text-decoration: none;
    padding: 5px 10px;
    display: block;
    color: white;

}

#horizontalmenu>ul>li>a:hover {
    background-color: rgb(104, 104, 104);
}


#horizontalmenu>ul>li>ul {
    background-color: rgb(148, 148, 148);
    display: none;
    width: 150px;
    top: 100%;
    left: 0;
    position: absolute;
}

#horizontalmenu>ul>li>ul>li {
    position: relative;
    width: 100%;
    display: block;
}

#horizontalmenu>ul>li>ul>li>a {
    text-decoration: none;
    padding: 5px 10px;
    display: block;
    color: black;
}

#horizontalmenu>ul>li>ul>li>a:hover {
    background-color: rgb(73, 73, 73);
}

#horizontalmenu>ul>li:hover>ul {
    display: block;
}

#horizontalmenu>ul>li>ul>li>ul {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    width: 150px;
}

#horizontalmenu>ul>li>ul>li>ul>li>a {
    text-decoration: none;
    padding: 5px 10px;
    display: block;
    color: black;
    background-color: #797979;
}

#horizontalmenu>ul>li>ul>li:hover ul {
    display: block;
}
<div id="horizontalmenu">
    <ul>
        <!-- list start -->
        <li>
            <a href="#">Menu 1</a>
            <ul>
                <li>
                    <a href="#">text</a>
                </li>
                <li>
                    <a href="#">text</a>
                </li>
                <li>
                    <a href="#">text ></a>
                    <ul class="horizontal">
                        <li><a href="#">text</a></li>
                        <li><a href="#">text</a></li>
                        <li><a href="#">text</a></li>
                        <li><a href="#">text</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">text</a>
                </li>
            </ul>
        </li>

        <li>
            <a href="#"> Menu 2</a>
            <ul>
                <li> <a href="#">text</a></li>
                <li> <a href="#">text</a></li>
                <li> <a href="#">text</a></li>
            </ul>

        </li>
    </ul>
</div>

Upvotes: -1

user19640240
user19640240

Reputation: 78

Your code needs some improvement - I've chopped out some lines to make clear which needs you to reorganize it again. The functionally should be working now. Hope that's work!

ul ul li:hover ul,
ul li:hover > ul {
    opacity: 1;
    visibility: visible;
}

.dropdown {
    z-index: 1002;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 14px; 
}


ul.left_menu{
width:180px;
padding:0px;
margin:0px;
list-style:none;
}
ul.left_menu li{
margin:0px;
list-style:none;

}
ul.left_menu li.odd a{
width:166px;height:25px;display:block; border-bottom:1px #e4e4e4 dashed;
text-decoration:none;color:#504b4b;padding:0;
line-height:25px;
}
.smenu{
display:none
}
ul.left_menu li.odd:hover .smenu
{
display:block;
color: #FFB03B;
}

ul.left_menu li.even:hover .smenu
{
display:block;
color: #FFB03B;
}
<ul class="left_menu">  

<div class="collapse navbar-collapse" id="myNavbarToggler4">
    <ul class="navbar-nav">
        <!-- menu item-->
        <li class="nav-item"><a class="nav-link" href="indexpage">Mainmenuitem1</a></li>

        <!-- menu item-->
        <li class="has-dropdown">
            <a href="#.html">Mainmenuitem2</a>

            <ul>                      
                <li >
                    <!-- submenus -->
                    <a style="background-color: grey; margin-right: 100px" href="#" class="dropdown-toggle"
                     >SubMenu1</a>
                  

                        <ul >
                           
                           <li class="even"><a href="#">SubSubMenu1</a>
                                <!-- with submenu -->
                               
                               
                                    <ul  class="smenu">
                                        <li >
                                            
                                            <a>data2</a>
                                        </li>                                        
                                    </ul>

                              
                            </li>
                        </ul>

                   
                </li>               
            </ul>

        </li>
    </ul>
</div>
</ul>

Upvotes: 1

Elly
Elly

Reputation: 55

I havent tested this with your code. so it might not work perectly for you. but below is a link to a thing called "onmouseover Events".

this is using javascript to apply the css on whats called "mouseover".

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover

Documentation: https://www.w3schools.com/jsref/event_onmouseover.asp

see if maybe you can use this :)

Upvotes: 0

Related Questions