為什么我的下拉菜單在div中不起作用？

Question

1. **

2. 這是我的菜單和下拉菜單的html代碼不起作用，還有什么地方不能正常工作。這是部分簡單的代碼，以后將在其中嵌入wordpress

    ** <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> ** 

這是我的下拉菜單的CSS代碼。

**

        .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

將UL標簽放在其父LI標簽中時，子菜單代碼將起作用

如下所示：

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

並且CSS代碼更改為：

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