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

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>