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