不使用 UL/LI 的仅 CSS 下拉菜单答案

【问题标题】：CSS only drop-down menu not using UL/LI不使用 UL/LI 的仅 CSS 下拉菜单
【发布时间】：2015-06-23 02:36:32
【问题描述】：

我是一个新手/自学 html 的人。我需要在接下来的 4 天内编辑我的（静态）网站菜单，使其对谷歌移动友好。我正在努力弄清楚该怎么做，但到目前为止还没有运气，所以我越来越绝望。我让整个网站对移动设备友好的方法是设置视口并在屏幕宽度小于 Xpx 时更改 CSS。

我只需要使用 CSS 将以下菜单转换为菜单按钮。即在移动视图中，将整个菜单隐藏在屏幕顶部的按钮中，并通过单击按钮使菜单显示/下拉。

这是我网站上的示例菜单：www.oikotrust.gr/en 这是我迄今为止管理的移动友好型（在这里上传仅供参考）：www.oikotrust.gr/index-mobile.html

<div class="menu">
<div class="menu_btn here">ΑΡΧΙΚΗ ΣΕΛΙΔΑ</div>
<div class="menu_btn"><a href="info.html">ΕΝΟΙΚΙΟ</a></div>
<div class="menu_btn"><a href="photos.html">ΦΩΤΟΓΡΑΦΙΕΣ</a></div>
<div class="menu_btn"><a href="contact.php">ΕΠΙΚΟΙΝΩΝΙΑ</a></div>
</div>

原始页面中的相关 CSS

.menu{margin-top:50px; float:left; margin-left:none;}
.menu_btn{height:35px; font-weight:bold; padding-top:10px; width:100%; padding-left:20px; font-size:18px;}
.here{background-image:none; background-repeat:no-repeat; color:#E5541C;}

非常感谢所有和任何帮助！

【问题讨论】：

valdelama.com/css-responsive-navigation

标签： html css drop-down-menu

【解决方案1】：

您不需要“转换”菜单，但不一定。您可以使用媒体查询根据您的视口设置内容样式，并使用可见性属性为不同的视口设置不同的元素。

小提示：始终在顶部为更宽的媒体查询编写 css，然后是较小的宽媒体查询，直到您到达最小的视口。

我前段时间写了一篇文章，也许这会对你有所帮助： http://readingssexy.com/blogpost/how-to-use-media-queries.html

【讨论】：

【解决方案2】：

由于类菜单是其所有子项的父类，您可以使用移动屏幕的媒体查询隐藏此类，您可以在菜单上方放置一个 div 并将按钮代码放在那里，这样会发生什么，在移动屏幕上当用户单击此按钮时，您的菜单将首先被隐藏，您可以向他显示菜单或切换菜单打开/关闭状态。希望你能得到这个。

【讨论】：