CSS Positioning My Links | Need Help

[mikegreenia.com]

I'm trying to align about 4 or 5 links across my page horizontally but instead they just lay on top of each other. Can somebody help. You can view the page at:

http://voluptuousdiva.com/example1/

Here is my stylesheet:


p.navigation {font-size: 20px; font-weight: bold; text-align: center;
width: 25%;
}

p.navigation a {display:block; color: black;
background-color: #CCCCCC; text-decoration: none;
padding: 5px; border: 3px solid black
}

p.navigation a:visited {display:block; color: black;
background-color: #CCCCCC; text-decoration: none;
padding: 5px; border: 3px solid black
}

p.navigation a:hover {display:block; color: white;
background-color: black; text-decoration: none;
padding: 5px; border: 3px solid white
}

[ray326]

Well the markup's wrong for starters.

<div class="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>

Then for styling, check out http://alistapart.com/articles/taminglists or let http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp build the list for you.