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

Question

我是一个新手/自学HTML的家伙。 我需要编辑我的（静态）网站菜单，以使其在接下来的4天内适合Google移动访问。 我要弄清楚该怎么做才伤脑筋，但是到目前为止还没有运气，所以我变得绝望了。 如果屏幕宽度小于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;}

所有和任何帮助深表感谢！

Answer 1

您不需要“转换”菜单，没有必要。 您可以使用媒体查询来根据视口对内容进行样式设置，还可以使用“可见性”属性为不同视口设置不同的元素。

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

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

Answer 2

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