Question

在小屏幕上，我有一个汉堡包菜单，下拉菜单显示一些列表项目。我正在尝试将子菜单添加到其中一些项目中。

我尝试过插入子菜单的多种变体但没有出现。常规汉堡包下拉功能正常，但在添加子菜单时根本没有变化。

这是html 没有添加子菜单。

    <input class="menu-btn" type="checkbox" id="menu-btn" />
  <label class="menu-icon" for="menu-btn"><span class="navicon"></span>    </label>
  <ul class="menu">
       <li><a href="#">Getting Started</a></li>
       <li><a href="#">Property Information</a></li>
       <li><a href="#">Home Financing</a></li>
       <li><a href="#">Loan Approval</a></li>    
       <li><a href="#">Loan Closing</a></li>
       <li><a href="#">Home Ownership</a></li>
  </ul>

如何在其中一个项目中添加子菜单？

Answer 1

只需在相应的ul块中添加li，如下所示。您将需要使用CSS来使其正确显示。

<强> HTML

    <nav>
        <ul>
            <li><a href="#">Getting Started</a></li>
            <li><a href="#">Property Information</a>
                <ul>
                    <li><a href="#">Sub-Property Information</a></li>
                    <li><a href="#">Sub-Property Information 2</a></li>
                </ul>
            </li>
            <li><a href="#">Home Financing</a></li>
            <li><a href="#">Loan Approval</a></li>    
            <li><a href="#">Loan Closing</a></li>
            <li><a href="#">Home Ownership</a></li>
        </ul>
    </nav>

<强> CSS

    <style>
        nav ul ul {
            display: none;
        }
        nav ul li:hover > ul {
            display: block;
        }
    </style>

子菜单不会显示在我的移动下拉列表中

1 个答案: