2 Votes Vote

Vertical navigation bar

Posted by topdog 798 days ago Questions| div href vertical All
Ok here's another question from me smile.gif
Sorry for all my maybe n00bish questions but I'm still learning CSS...

I have been making a vertical navigation menu on the left of the page... you can view the result so far by clicking HERE
As you can see, the (again) hover effect is not 100% correclty...

This is what I mean... CLICK HERE

As you can see the hover image is not well-placed and also the dashed border when you click on a link is larger then the button is...

This is the code:

HTML

CODE
<div class="header">
<h1>General</h1>
</div>
<ul class="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">News Flash</a></li>
</ul>


CSS

CODE
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}

h1 {
    font-family: Arial;
    font-size: 11px;
    font-weight: bold;
    font-style: normal;
    text-align: left;
    color: #000000;
    padding-top: 3px;
    padding-left: 3px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.header {
    background-image: url(nav_header.png);
    background-position: left center;
    background-repeat: no-repeat;
    height: 20px;
    width: 174px;
}

.navigation li {
    background-image: url(nav_bar.png);
    background-position: center;
    background-repeat: no-repeat;
    color: #999999;
    display: block;
    font-family: Arial;
    font-size: 11px;
    font-weight: normal;
    font-style: normal;
    text-align: left;
    height: 20px;
    width: 174px;
}

.navigation li a {
    color: #999999;
    display: block;
    text-decoration: none;
    height: 20px;
    width: 174px;
    padding-top: 3px;
    padding-left: 3px;
}

.navigation li a:hover {
    background-image: url(nav_hover.png);
    background-position: center;
    background-repeat: no-repeat;
    height: 20px;
    width: 174px;
}


Does somebody know what I'm doing wrong here?
Discuss Bury


Who Voted for this Question