HTML CSS UL菜单样式

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