Question

在我网站的响应方面实施下拉菜单时遇到一些问题。

单元格会自动从顶部填充，并且向顶部添加填充以使文本居中似乎会增加所有边上的填充。
单元格使用IE浏览器进行均匀填充，但在firefox上高度为gos haywire。
我实施的方法使用：将鼠标悬停在下拉菜单中，这是否会导致移动设备出现问题？

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

（我不想使用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

你使用的是font-size：6VW;这意味着视口宽度，它响应屏幕宽度，我使用％，em或px。

使用：专注于触控设备。

响应式下拉菜单问题

1 个答案: