Is there a way to add some spacing between the menu items without affecting the background color applied to the anchor tags?
I currently use a right margin of 13px for the spacing, but it also applies the background color, which is not the desired outcome. I want the background color to only be visible on the list and anchor elements, and not in the margin space between them.
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;
}