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

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -