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

我是个新手/自学成才的html爱好者。我需要编辑我的静态网站的菜单，使其在未来4天内谷歌移动友好。我绞尽脑汁想知道怎么做，但到目前为止运气不好，所以我感到绝望。 我使我的整个网站移动友好的方法是设置视口，如果屏幕宽度小于Xpx，则更改CSS

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

这是我网站上的菜单样本：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，接下来是更小的宽媒体查询，直到到达最小的视口

我不久前写了一篇文章，也许这会对你有所帮助：

---

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

.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;}