Navigation HTML?

Question

I need a really good but easy to use HTML code for the sidebar//navigation for my website!

Answer 1

If you don't mind spending a little time studying, there's some really good examples at http://www.alistapart.com ... just google "sidebar navigation" and choose the results that list that address in the URL! (That's where the pros go!)

Answer 2

<style>

ul {

    list-style-type: none;

}

li {

width: 150px;

margin-bottom: 1px;

}

a {

display: block;

background-color: #06C;

color: #FFFFFF;

line-height: 20px;

border-bottom: 1px solid #444;

}

</style>

<ul>

<li><a href="link1.html">Link 1</a></li>

<li><a href="link2.html">Link 2</a></li>

<li><a href="link3.html">Link 3</a></li>

<li><a href="link4.html">Link 4</a></li>

</ul>

Answer 3

Here's a modified version of chris b's ---

Just changed the style a bit...

-----------------

ul{

list-style-type:none;

display:block;

}

li a{

width:150px;

display:block;

background-color:#06C;

color:#FFF;

line-height:20px;

margin:5px 5px 5px 5px;

padding:5px 5px 5px 5px;

}

li a:hover{

background-color:#C60;

color:#FFE;

}

---------------------

Change colors as you see fit. The real change is making the entire list element clickable (not just the hyperlink), and also changing the background color on the :hover pseudo class.