gpt4 book ai didi

css - 删除 CSS 菜单中菜单项之间空间的背景颜色

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

<分区>

我需要我的菜单项在它们之间显示一些空间,所以我使用 13px 的右边距。

但是,background-color 与 anchor 标记的相同。相反,我需要 background-color 仅应用于列表/ anchor 元素,而不是它们之间的边距空间。

HTML:

<body>
<div id="container">
<div id="title">
Vanneuville <br />
Wielersport
</div>

<div id="menu">
<ul id="nav">
<li><a href="#">Home</a></li>
<li>
<a href="#">Fietsen</a>
<ul>
<li><a href="#">Recreationeel</a></li>
<li><a href="#">Electrische fietsen</a></li>
<li><a href="#">Koersfietsen</a></li>
<li><a href="#">Mountainbikes</a></li>
<li><a href="#">Kinderfietsen</a></li>
</ul>
</li>
<li><a href="#">Kledij</a></li>
<li><a href="#">Helmen</a></li>
<li><a href="#">Tweedehands</a></li>
<li><a href="#">Verhuur</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

<div class="clear" id="content">
<p>Some paragraph</p>
</div>
</div>

CSS:

body
{
background: url('../images/peloton.jpg') no-repeat center center fixed;
-webkit-background-size: cover; /*for webKit*/
-moz-background-size: cover; /*Mozilla*/
-o-background-size: cover; /*opera*/
background-size: cover; /*generic*/
font-family: "Cambria";
}

#container{
width: 1000px;
margin-left: auto;
margin-right: auto
}

#title{
display: inline-block;
font-size: 80px;
background-color: black;
color: white;
opacity: 0.8;
padding: 15px;
float:left;
}

#menu{
float:left;
padding-top: 10px;
font-size: 31px;
}

#content{
padding-top: 10px;
background-color: red;
background-clip: content-box;
}

.clear{
clear: both;
}

ul{
list-style-type: none;
padding:0;
margin:0;
}

ul#nav li{
background: grey;
float: left;
}

ul#nav li a{
display: block;
padding: 5px 10px;
color: #000;
text-decoration: none;
border: 1px solid #ccc;
margin-right: 13px;
}

ul#nav li a:hover{
background: #aaa;
}

ul#nav li ul li{
float: none;
}

ul#nav li ul{
position: absolute;
display: none;
}

ul#nav li:hover ul{
display: block;
}

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