CODEWITHSUNDEEP
htmlcssnav
Sarah McLachlane
Sarah McLachlane

Reputation: 537

HTML5 navigation menu text

I am trying to make a navigation bar with <nav> in HTML5 with a simple text and 3 links. This is pretty basic, but the text of my links gets mixed up and I don't know why.

↪ See my code at JSFiddle

Upvotes: 0

Views: 639

Answers (2)

joual
joual

Reputation: 141

it was because of the position:absolute and position:relative parts in your css.

Try this : 

nav {
    width:100%;
    height:181px;
    display: block;
    background: url('http://i.imgur.com/JrTUv.png') top no-repeat;
    margin-top:30px;
}
nav ul {
    float:right;
    list-style:none;
}

nav ul li {
    display:inline-block;
}

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

You need to float your LI, not your UL. No need for position:absolute. If you want to move the menu to the right, you can float it as well, or use margin:left. Just be sure to clear your floats after.

See my tutorial: I Love Lists

Upvotes: 2

Related Questions