Add space between <li> elements

Question

I have a nav-menu on which it seems that I can't add a space (margin: 3px;) between the <li> elements.

You can see the HTML and CSS code on this jsfiddle or below.

You will see that I've added a border-bottom: 2px solid #fff; to the #access li to simulate the space between elements, but that is not going to work because under the nav-menu I will have a bunch of different colors. If I add margin-button: 2px it doesn't work.

This is the HTML:

<nav id="access" role="navigation">     <div class="menu-header-menu-container">         <ul id="menu-header-menu" class="menu">             <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41">                 <a href="http://localhost:8888/fullstream/?page_id=5">About Us</a>             </li>             <li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35">                 <a href="http://localhost:8888/fullstream/?page_id=7">Services</a>             </li>             <li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34">                 <a href="http://localhost:8888/fullstream/?page_id=9">Environmental Surface Cleaning</a>             </li>             <li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33">                 <a href="http://localhost:8888/fullstream/?page_id=11">Regulations</a>             </li>             <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32">                 <a href="http://localhost:8888/fullstream/?page_id=13">Contact Us</a>             </li>        </ul> </div> 

This is the CSS:

#access {     background: #0f84e8; /* Show a solid color for older browsers */     display: block;     margin: 0 auto 6px 55px;     position: absolute;     top: 100px;     z-index: 9999; } #access ul {     font-size: 13px;     list-style: none;     margin: 0 0 0 -0.8125em;     padding-left: 0; } #access li {     position: relative;     padding-left: 11px; } #access a {     border-bottom: 2px solid #fff;     color: #eee;     display: block;     line-height: 3.333em;     padding: 0 10px 0 20px;     text-decoration: none; }  #access li:hover > a, #access ul ul :hover > a, #access a:focus {     background: #efefef; } #access li:hover > a, #access a:focus {     background: #f9f9f9; /* Show a solid color for older browsers */     background: -moz-linear-gradient(#f9f9f9, #e5e5e5);     background: -o-linear-gradient(#f9f9f9, #e5e5e5);     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */     background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);     color: #373737; } #access ul li:hover > ul {     display: block; } 

Answer 1

UPDATE 2021

My original answer was from 2012 when many of the Level 3 CSS Selectors did not exist. To achieve this we would need JS or other explicit CSS styles/classes to achieve it. As @AlphaX has pointed out the best solution now is simply

li.menu-item:not(:last-child) {     margin-bottom: 3px;   } 

OLD ANSWER

add:

margin: 0 0 3px 0; 

to your #access li and move

background: #0f84e8; /* Show a solid color for older browsers */ 

to the #access a and take out the border-bottom. Then it will work

Here: http://jsfiddle.net/bpmKW/4/

Answer 2

You can use the margin property:

li.menu-item {    margin:0 0 10px 0;    } 

Demo: http://jsfiddle.net/UAXyd/