gpt4 book ai didi

html - CSS 下拉导航链接局促

转载 作者:太空宇宙 更新时间:2023-11-03 23:05:28 25 4
gpt4 key购买 nike

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

enter image description here

下面是 HTMLCSS,以及指向 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/

最佳答案

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

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

Working Fiddle

关于html - CSS 下拉导航链接局促,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34894658/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com