How to do this navigation bar? - html

Question

i want to make a navigation bar similar the one found here.
I tried but I couldn't :D
Here's what I did:
HTML:
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
CSS
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
or you can try the fiddle that i created
http://jsfiddle.net/uYd9u/

Answer 1

I believe this is what you are looking to do.
http://jsfiddle.net/cornelas/uYd9u/11/
In order to achieve what you are wanting to create.
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
border-bottom: 4px solid #98bf21;
text-align: right; //ADD
}
li
{
display: inline-block; //REMOVE FLOAT:right;
vertical-align: bottom; //ADD to align to bottom
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
li.active,li.active a:link{//ADD so you can have one box have a background.
background-color:#98bf21;
color:#FFFFFF;
}
a:hover,a:active
{
background-color:#7A991A;
}