Question

**

这是我的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;
        }

为什么我的下拉菜单不在div中？

1 个答案: