why my dropdown menu is not working in the div?

Question

1. **

2. this is my html code for menu and drop down menu is not working and also whereare things that its not working properly.and this is part simple code and where it will be embedded with wordpress later onwards

    ** <div class="menu-logo"> <div class="container"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> <ul class="menu"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT US</a></li> <ul class="submenu"> <li><a href="#">LONG </a></li> <li><a href="#">SERVICES</a></li> <li><a href="#">COST</a></li> </ul> <li><a href= "#">ROOM</a></li> </ul> </div> ** 

this is my css code for drop down menu.

**

        .menu-logo {
            margin-top: 9px;
            background: #999;
        }
        ul.menu {
            list-style-type: none;
            /* display: inline-block; */
            margin-top: 34px;
            position: relative;
        }
        ul.menu li {
            font-family: 'Roboto Condensed', sans-serif;
            padding: 7px 12px 5px 12px;
            display: inline-block;
        }
        ul.menu li a {
            color: #fff;
            font-size: 16px;
            text-decoration: none;
        }
        ul.submenu {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
            display: none;
            /* display: inline-block; */
        }
        ul.submenu a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }
        ul.submenu a:hover {background-color: #f1f1f1}
        }
        ul li a:hover ul.submenu {
            display: block;
        }

Answer 1

The submenu code will work when you place the UL tag in its parent LI tag

Like below::

<div class="menu-logo">
                <div class="container">
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                    <ul class="menu">
                        <li><a href="#">HOME</a></li>
                        <li><a href="#">ABOUT US</a>
                            <ul class="submenu">
                                 <li><a href="#">LONG </a></li>
                                 <li><a href="#">SERVICES</a></li>
                                 <li><a href="#">COST</a></li>
                            </ul>
                        </li>           
                        <li><a href= "#">ROOM</a></li>
                    </ul>

                </div>

and the css code changes to:

ul li:hover ul.submenu {
            display: block;
        }