CSS 下拉导航链接拥挤答案

【问题标题】：CSS Drop-Down Navigation Links CrampedCSS 下拉导航链接拥挤
【发布时间】：2016-04-25 23:32:44
【问题描述】：

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

下面是HTML 和CSS，以及指向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/

【问题讨论】：

标签： html css responsive-design frontend

【解决方案1】：

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

【讨论】：

这非常有效。我所要做的就是添加（顶部：22px）来抵消链接的底部填充。

【解决方案2】：

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

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

Working Fiddle

【讨论】：