Question

我一直在网上寻找一些解决方案，但所有这些解决方案都失败了，甚至不适合我的问题。

我有一个响应式网站，上面有一个菜单。该菜单还包含一个下拉项目：

        <header id="header">
            <nav id="nav">
                <ul><li><a href=".html">Item 1</a></li>
                    <li class="submenu">
                        <a href=""><img src="images/list-icon.png" width="15px"></a>
                        <ul>
                            <li><a href=".html">Sub-Item 1</a></li>
                            <li><a href=".html">Sub-Item 2</a></li>
                        </ul>
                    </li>
                <li><a href=".html">Item 2</a></li>
                </ul>
            </nav>
       </header>

（我简化了一下，但我希望你能得到这个想法）

我已经用不同的样式表解决了响应度（所以不是@media thingys），我愿意只在其中一个样式表（在智能手机上）中使下拉菜单项不可见。我已经尝试过这些了：

#header .submenu {
     visibility: hidden;
     display: none;
}
.submenu {
    visibility: hidden;
    display: none;
}
#header nav ul li.submenu {
     visibility: hidden;
     display: none;
} 
#header .submenu {
     visibility: hidden;
     display: none;
}
.submenu {
    visibility: hidden;
    display: none;
}
header nav ul li.submenu {
    visibility: hidden;
    display: none;
}

（菜单列表位于/ header / tag中，其id =“header”）

我对这整个响应的事情都很陌生，所以这个问题可能看起来很愚蠢或者其他什么，但是自从我经历了stackoverflow.com之后，幸运的是你们总是对彼此很友好。提前谢谢。

Answer 1

除非您的帖子中出现拼写错误，否则您错过了#中的header nav ul li.submenu {}。

#header .submenu {
    visibility: hidden;
    display: none;
}
.submenu {
    visibility: hidden;
    display:none;
}
#header nav ul li.submenu {
    visibility: hidden;
    display: none;
} 
#header .submenu {
    visibility: hidden;
    display: none;
}
.submenu {
    visibility: hidden;
    display:none;
}
#header nav ul li.submenu {
    visibility: hidden;
    display: none;
}

出于兴趣，你能解释为什么你不想使用媒体查询吗？

@media only screen and (max-width: 1024px){
   #header .submenu {
     display: none;
   }
}

这将隐藏在宽度为1024px或更低的任何设备上.submenu内的所有#header。对于移动设备，您可能会看到不到600px。

Answer 2

对于媒体查询引用，一个好的资源是： http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

此外，使用样板和预处理器将有助于解决许多响应式设计问题。

使列表元素在移动设备上不可见（响应）

2 个答案: