CSS下拉导航链接狭窄

我试图创建一个响应式下拉CSS菜单，我有一个媒体查询针对移动设备（760像素）。我试图让所有的链接占据整个宽度，这很好，但问题是当宽度小于760像素时显示下拉菜单时，下拉菜单中的所有链接都局促导入导航链接。我想知道如何解决这个问题，因为我一直在想很久没有找到解决方案。我想让服务的下拉菜单直接位于服务下方，最后一个联系链接位于下拉菜单下方。这就是问题所在：CSS下拉导航链接狭窄

下面是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/

来源

2016-01-20 Henry Zhu

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

来源

2016-01-20 08:20:32

这完美地工作。我所要做的只是添加（top：22px）来抵消链接的底部填充。 –

你应该ul.links ul {到position: relative;媒体查询以正确显示它。

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

Working Fiddle

来源

2016-01-20 08:14:42 ketan

CSS下拉导航链接狭窄

回答

相关问题