Question

我有一个带子菜单的菜单，我试图隐藏我的网站移动版的子菜单，但我不知道怎么做，虽然这很容易，但由于某种原因它不起作用。

我的HTML：

<div id="menumobile">
   <ul class="nav menuprincipalhorizontal">
      <li>
         <a href="">1</a>
         <ul>
            <li><a href="">11</a></li>
            <li><a href="">12</a></li>
         </ul>
      </li>
      <li>
         <a href="">2</a>
         <ul>
            <li><a href="">21</a></li>
         </ul>
      </li>
      <li><a href="">3</a></li>
      <li><a href="">4</a></li>
   </ul>
</div>

我的CSS：

#menumobile
{
    position: absolute;
    top: 0;
    z-index: 1;
}
#menumobile > .menuprincipalhorizontal
{
    display: flex;
    flex-flow: column;
    justify-content: stretch;
    margin: 0;
    padding: 0;
}
#menumobile > .menuprincipalhorizontal > li
{
    margin: 0;
    padding: 0;
}
#menumobile > .menuprincipalhorizontal > li > lu
{
    display: none;
}

小提琴：

https://fiddle.jshell.net/ddzh8rc9/

Answer 1

你写了lu而不是ul。

替换

#menumobile > .menuprincipalhorizontal > li > lu

通过

#menumobile > .menuprincipalhorizontal > li > ul

Answer 2

你可以用当前的css替换

#menumobile > .menuprincipalhorizontal > li > ul
{
    display: none;
}

Answer 3

＆＃13;

    #menumobile
{
    position: absolute;
    top: 0;
    z-index: 1;
}
#menumobile > .menuprincipalhorizontal
{
    display: flex;
    flex-flow: column;
    justify-content: stretch;
    margin: 0;
    padding: 0;
}
#menumobile > .menuprincipalhorizontal > li
{
    margin: 0;
    padding: 0;
}
#menumobile > .menuprincipalhorizontal > li > ul
{
    display: none;
}

＆＃13;

<div id="menumobile">
   <ul class="nav menuprincipalhorizontal">
      <li>
         <a href="">1</a>
         <ul>
            <li><a href="">11</a></li>
            <li><a href="">12</a></li>
         </ul>
      </li>
      <li>
         <a href="">2</a>
         <ul>
            <li><a href="">21</a></li>
         </ul>
      </li>
      <li><a href="">3</a></li>
      <li><a href="">4</a></li>
   </ul>
</div>

＆＃13;

如何用css隐藏里面的子ul

3 个答案: