HTML CSS UL menu style

Question

Небольшой вопрос о том, как добиться некоторого стиля в меню HTML/CSS UL.

У меня есть стандартное меню UL, но у меня возникают проблемы с тем, как добиться определенного взгляда на стиль. Меню UL, как это в настоящее время стоит показано здесь:

http://jsfiddle.net/WMQqt/

(HTML)

<ul id="nav"> 
    <li><a href="#">CONTACT US</a> 
    </li> 
    <li><a href="#">HOME</a> 
    </li> 
</ul> 

(CSS)

#nav { 
    list-style: none; 
    margin-bottom: 10px; 
    */ margin-top: -6px; 
    position: relative; 
    right: 286px; 
    z-index: 9; 
    height: 26px; 
    padding: 4px 4px 4px 4px; 
    font-weight: bold; 
} 
    #nav li { 
    float: right; 
    margin-right: 10px; 
} 

#nav a { 
    display: block; 
    padding: 5px; 
    color: #444444; 
    background: #fff; 
    text-decoration: none; 
    border: 1px solid grey; 
} 

#nav a:hover { 
    color: #fff; 
    background: #04B431; 
} 

Я хотел бы кнопки меню, чтобы иметь маленькая граница 1px, но затем некоторое заполнение пробелов около 3px до того, как начнется цвет фона.

Подобно тому, как это выглядит:

http://jsfiddle.net/6PY7z/

Можно ли это сделать с помощью метода меню UL?

Спасибо за любой совет, я не эксперт по HTML/CSS.

Answer 1

Добавить margin в a теге и перейти границу li

#nav li 
{ 
    float: right; 
    margin-right: 10px; 

    border: 1px solid grey; 
} 

    #nav a 
    { 
     display: block; 
     padding: 5px; 
     color: #444444; 
     background: #ccc; 
     text-decoration: none; 
     margin:3px;  
    } 

DEMO

Answer 2

вы можете использовать следующие стили для достижения того, что вы хотите:

#nav li 
{ 
    float: right; 
    margin-right: 10px; 
border: 1px solid grey; /*put original border here*/ 
} 

#nav a 
{ 
    display: block; 
    padding: 5px; 
    color: #444444; 
    background: #d8d8d8; /*new background-color*/ 
    text-decoration: none; 
    border: 3px solid white; /*add white padding here*/ 
} 

http://jsfiddle.net/WMQqt/4/