gpt4 book ai didi

html - 如何删除下拉菜单上多余的黑色

转载 作者:行者123 更新时间:2023-11-28 11:15:18 24 4
gpt4 key购买 nike

抱歉嵌套不好
我怎样才能摆脱这段代码创建的额外黑色。如果你需要一个链接到站点评论,我会做一个快速的 ftp。黑色显示在下拉菜单中。它出现在我试图将菜单居中的时候。
//这是html代码

    <!DOCTYPE html>
<html>
<head>
<title>BHSS Solar Racing</title>
<meta charset='utf-8'/>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<p>
<div>Bloomington High School South</div>
<div>Solar Racing Team</div>
</p>
<p>
<div>Helionauts</div>
</p>
<!--Team-->
<p>
<div>
</div>
</p>
<!--Sponsors-->
<p>
<div>
</div>
</p>
<!--History-->
<p>
<div>
</div>
</p>
<!--Vehicles-->
<p>
<div>
</div>
</p>
<!--Donate-->
<p>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Donate</a>
<ul>
<li><a href="#">Sponsorship Perks</a></li>
<li><a href="#">Payment Information</a></li>
</ul>
</li>
<li><a href="#">Articles</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">User Experience</a></li>
</ul>
</li>
<li><a href="#">Inspiration</a></li>
</ul>
</nav>
</p>
</body>
</html>

//这是css代码

    nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: block;
}
nav ul {
background: #000000;
background: linear-gradient(top, #000000 0%, #000000 100%);
background: -moz-linear-gradient(top, #000000 0%, #000000 100%);
background: -webkit-linear-gradient(top, #000000 0%,#000000 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 0px;
list-style: none;
position: relative;
left:640px;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}

nav ul li a {
display: block; padding: 25px 40px;
color: #FFFFFF; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: relative; top: 100%;
left:0px;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}

nav ul ul ul {
position: absolute; left: 100%; top:0;
}

最佳答案

这里的问题是,由于您的子菜单嵌套在主菜单中,因此每次显示子菜单时,父菜单都必须扩展以为子菜单腾出空间。出现的额外黑色空间说明了这种扩展。

这里的解决方案是从最顶层的 ul 中删除背景,并将其应用于其直接子级 li

我已将您的 nav ul CSS 规则集替换为以下内容:

nav > ul > li {
background: #000000;
background: linear-gradient(top, #000000 0%, #000000 100%);
background: -moz-linear-gradient(top, #000000 0%, #000000 100%);
background: -webkit-linear-gradient(top, #000000 0%, #000000 100%);
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
}
nav ul {
padding: 0 20px;
list-style: none;
position: relative;
left:640px;
display: inline-table;
}

请注意,所有关于背景或边框的规则都已移至 li

JSFiddle

关于html - 如何删除下拉菜单上多余的黑色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21793743/

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