子菜单不会显示在我的手机下拉

在小屏幕上，我有一个汉堡菜单，下拉菜单显示一些列表项。我正在尝试在这些项目中添加子菜单。子菜单不会显示在我的手机下拉

我已经尝试过插入子菜单的多种变化，但没有出现。常规汉堡包下拉菜单功能正常，但在添加子菜单时完全不会改变。

这里是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>

如何在这些项目之一中添加子菜单？

来源

2016-06-29 Ian Lapham

这看起来可能是引导相关。也许添加这样的东西会有所帮助：http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3 - 它使用“下拉式”工具，但您可以将其整合。 – steakpi

只需在相应的li块内添加一个ul，如下所示。你将需要玩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>

来源

2016-06-29 18:04:08 Berdesdan

子菜单不会显示在我的手机下拉

回答

相关问题