html - 响应式下拉菜单问题

Question

在为我的网站的响应端实现下拉菜单时遇到了一些问题。

• 单元格会自动从顶部填充，向顶部添加填充以使文本居中似乎会增加所有边的填充。

• 使用 IE 浏览器时，单元格具有均匀的填充，但在 Firefox 上，高度会乱七八糟。

• 我实现的方法使用 :hover 作为下拉菜单，这会在移动设备上造成问题吗？

我花了很多天研究下拉菜单的不同方法，是否有更简单或更标准的方法来实现这些？

(我不想使用 javascript，因为我还没有学习基础知识，并且想了解我在编程什么)

非常感谢对此的任何帮助。谢谢。

---HTML----

<div class="dropdown">
       <ul class="nav">
         <li><img class="btn" src="images/menuIcon.png"
                                   alt="Menu button" />
           <ul class="menu">
            <li><a href="index.htm">Home</a></li>
            <li><a href="holisticMassage.htm">Holistic Massage</a></li>
            <li><a href="aboutDuncan.htm">About Duncan</a></li>
            <li><a href="testimonials.htm">Testimonials</a></li>
            <li><a href="prices.htm">Prices</a></li>
            <li><a href="contact.htm">Contact</a></li>
            <li><a href="map.htm">Location</a></li>
           </ul>
         </li>
       </ul>
   </div>

---/HTML---

----CSS----

.dropdown{
 position: relative;
 display: inline-block;
 }

.dropdown .menu {
  position: absolute;
  top: 100%;
  display:none;
  margin: 0px;
  padding: 0px;
  list-style: none; /** Remove list bullets */
  width:120%;
  padding: 0;
  z-index:1;
  }

.dropdown ul {
  list-style: none;
  overflow: hidden;
}

.dropdown ul li ul li{
   float: none;
   padding-top:10%;
   background-color: #E5E5E5;
   text-align:center;
   border:1px solid grey;
 }

.btn {
     display: block;
}

 .menu li a{
   padding:0px;
 }

 .menu li a{
   font-family: gabriola, Verdana, Geneva, sans-serif;
   font-size: 6vw;
   font-weight: bold;
   text-decoration: none;
   color: #505050;
  }

  ul li:hover .menu {
     display: inline-block;
 }


---/CSS----

Answer 1

您使用的字体大小:6VW；这意味着视口(viewport)宽度，它响应屏幕宽度，我会使用 %、em 或 px。

对触摸设备使用 :focus。