Remove background color of the space between menu items in a CSS menu -
i need menu items show space between them, use right margin of 13px
.
but, then, background-color
same anchor tag. instead need background-color
apply list/anchor elements, , not margin space inbetween.
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; }
move background colour declaration li
anchor
ul#nav li{ float: left; } ul#nav li a{ background: grey; }
Comments
Post a Comment