HTML CSS UL menu styling

Question

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.

Just apply border to LI and background to A (as you did with DIVs). — Adriano Repetti
– Adriano Repetti, Commented Mar 15, 2013 at 11:21

Sowmya · Accepted Answer · 2013-03-15 11:21:20Z

5

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

answered Mar 15, 2013 at 11:21

Sowmya

27k21 gold badges102 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Harry Over a year ago

Thank you very much - I am still learning and fail to spot these things sometimes. Appreciate the explanation.

Sowmya Over a year ago

@Harry u r welcme and all the best

Pete · Accepted Answer · 2013-03-15 11:27:41Z

2

you can use the following styles to achieve what you want:

#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/

answered Mar 15, 2013 at 11:27

Pete

58.8k31 gold badges132 silver badges188 bronze badges

Comments

xoxo_tw · Accepted Answer · 2018-12-01 22:31:45Z

0

ok

in html go

<dl><div><dt>F</dt><dd>T</dd></div>
     <div><dt>F</dt><dd>T</dd></div>
     <div><dt>F</dt><dd>T</dd></div>
     <div><dt>F</dt><dd>T</dd></div>
</dl>

in css

dl { display: flex;
flex-direction: column;}

some hints...

dt float left AND dd float right

answered Dec 1, 2018 at 22:31

xoxo_tw

1

1 Comment

Roy Prins Over a year ago

The description list <dl> tag has a different semantic meaning than the <ul> tag. These should not be used interchangeably and you do not explain in your answer why you recommend a <dl>, not how it would solve OP's question.

Collectives™ on Stack Overflow

HTML CSS UL menu styling

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related