2

我需要我的菜单项在它们之间显示一些空间，所以我使用13px.

但是，然后，background-color它与锚标记相同。相反，我需要background-color仅适用于列表/锚元素，而不是两者之间的边距空间。

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;
}
4

1 回答 1

3

将背景颜色声明li从anchor 

ul#nav li{
    float: left;
}

ul#nav li a{
    background: grey;
}
于 2013-05-14T22:44:03.573 回答