HTML CSS UL menu styling

css, html, html-lists

Solution

Add `margin` to `a` tag and move border to `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

Problem

Small question on how to achieve some styling on a HTML / CSS UL menu. I have a standard UL menu, but having some issues getting my head around how to achieve a certain look to the styling. The UL menu as it currently stands is shown here: 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; } ``` I'd like the menu buttons to have a small 1px border, but then some white space padding of around 3px before the background color starts. Similar to how this looks: http://jsfiddle.net/6PY7z/ Can this be done using the UL menu method? Thanks for any advice, I'm no expert with HTML / CSS.

Original source