CSS 下拉导航链接拥挤

Question

我正在尝试创建一个响应式下拉 CSS 菜单，并且我有一个针对移动设备（760 像素）的 媒体查询 。我试图让所有 link 占据整个宽度，这很顺利，但问题是当我在宽度小于 760 像素时显示下拉菜单时，所有 link 的下拉菜单挤在导航 link 中。我想知道这个问题怎么解决，因为我想了很久也没有想出解决办法。我希望服务的下拉菜单直接位于服务下方，最终联系人 link 位于下拉菜单下方。这是问题所在：

下面是HTML和CSS，还有一个link到JSFiddle。

HTML:

   <div class="wrapper">
      <ul class="links">
         <li id="active"><a href="#" class="link">home</a>
         </li><li><a href="#" class="link">about</a>
         </li><li><a href="#" class="link">services</a>
            <ul class="links">
               <li><a href="#" class="link2">web development</a>
               </li><li><a href="#" class="link2">design templates</a>
               </li><li><a href="#" class="link2">networking</a>
               </li><li><a href="#" class="link2">custom builds</a>
               </li>
            </ul>
         </li><li><a href="#" class="link">contact</a></li>
      </ul>
   </div>

CSS:

html,
body {
    margin: 0;
    padding: 0;
    font-family: Source Sans Pro, Helvetica, sans-serif;
}
.wrapper {
    width: 100%;
    height: auto;
}
ul.links {
    margin: 0px;
    padding: 0px;
    list-style: none;
    background-color: #EBEBEB;
}
ul.links a {
    color: #737373;
    text-decoration: none;
}
ul.links ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
}
ul.links li {
    background: none;
    color: #737373;
    display: inline-block;
    position: relative;
    font-size: 19px;
    padding-top: 22px;
    padding-bottom: 22px;
    padding-left: 35px;
    padding-right: 35px;
    transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -webkit-transition: background 0.2s linear 0s, color 0.2s linear 0s;
}
ul.links ul li {
    position: relative;
    font-size: 18px;
    display: block;
    float: left;
    width: 100%;
}
ul.links li:hover {
    background-color: #6ECFFF;
}
ul.links li:hover ul {
    display: block;
}
ul.links li:hover .link {
    color: #F0F0F0;
}
ul.links ul li:hover .link2 {
    color: #F0F0F0;
}
#active {
    background-color: #6ECFFF;
}
#active a {
    color: #F0F0F0;
}
@media screen and (max-width: 760px) {
    ul.links li 
    {
        width: 100%;
    }

    ul.links ul {
        position: absolute;
        left: 0;
    }

    ul.links ul li {
        background: #EBEBEB;
    }
}

JSFiddle: https://jsfiddle.net/7tkn7zzs/

Answer 1

您应该在媒体查询中将 ul.links ul { 设置为 position: relative; 才能正确显示。

ul.links ul {
  position: relative;
  left: 0;
}

Working Fiddle

Answer 2

 ul.links ul {
        position: relative;
        left: -35px; /* equal to padding left */
    }

CSS 下拉导航链接拥挤

CSS Drop-Down Navigation Links Cramped

html

css

frontend

responsive-design