CODEWITHSUNDEEP
htmlcssxhtml
TheEagle
TheEagle

Reputation: 179

Css how to create navigation bar

I'am trying to make this in css. Trying to make this navigation bar. Any help would be great. This is what iam trying to do:

enter image description here

So the first pic is how it should look like when the user enter the website. Then if they hover over the any of the tabs it should just change color. Any help on trying to make this would be great. I tried this but wont work.

HTML: 

<div class="horizontal">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Register.html">Register</a></li>
<li><a href="Rules.html">Rules</a></li>
</ul>
</div>

Just need to see what the css would look like. Thanks again

EDIT what i have done as people want 2 see: 

div.horizontal
{
width:809px;
height:63px;
position:relative;
top: -1046px;
left: 104px;
}
div.horizontal ul
{
list-style-type:none;
margin:0;
padding:0;
}
div.horizontal li
{
  display: inline-block;
  margin-left: 5px;
}
div.horizontal a
{
display:block;
width:809px;
}
div.horizontal a:link,div.horizontal a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#000000;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
div.horizontal a:hover,div.horizontal a:active
{
background-color:#999999;
}

Like i said this is not right but this is all i can do atm. Thanks

Upvotes: 0

Views: 7002

Answers (1)

Vucko
Vucko

Reputation: 20834

Using your HTML, you can do something like this:

CSS

ul{
    list-style:none;
}

li{
    float:left;
    width:100px;
    height:50px;
    background:black;
    border:2px solid gray;
    text-align:center;
}

a{
    color:white;
    text-decoration:none;
    font-size:24px;
    font-weight:bold;
    line-height:50px;
    font-style:italic
}

li:hover{
    background:gray;
}

JSFiddle.

Just change the colors.

Upvotes: 2

Related Questions