Navigation Bar Customization

The address for my blog is https://www.djripe.com/blog/

I want the navigation bar to look like this: https://djripe.com/blog/wp-content/uploads/2010/01/Screen-shot-2010-01-23-at-9.28.32-PM.png

The screenshot is of https://www.djatrak.com

Thanks

Hi there rodent,
This might help get you on the right tract. I haven’t styled the active and current states for the menu, but so far it should look pretty close to what you’re looking for:

The HTML:

<div id="navmenu">
<ul>
<li><a href="">blog</a></li>
<li><a href="">about</a></li>
<li><a href="">upcoming</a></li>
<li><a href="">downloads</a></li>
<li><a href="">contact</a></li>
</ul>
</div>

The CSS:

#navmenu ul {
	margin: 0;
	list-style-type: none;
	list-style-image: none;
	background: #01000a;
	float: left;
}
#navmenu li {
	display: inline;
	font-size: 1.5em;
}
#navmenu a {
	text-decoration:none;
	padding: 15px 45px 15px 45px;
	float: left;
	color:#a19060;
}
#navmenu a:hover {
	color: red;
}

HTH,
Bill

PS to my post: A-Trak uses a background image positioned right for his vertical spacer and then gives a special style to the last link to eliminate it.
–b

Thanks for your help,

I tried to make the above changes, however the bar ended up on the top of the screen!

I am fairly new to CSS so I could just be my fault.

About, your last post. What does this mean? How would I do the same?

Thanks,

Rob

Also, on A-Trak’s site the Navigation bar is not in any border.

In addition, the top of the page closes off!

How could I do these things?

I really appreciate it,

Robert

If you’re using WordPress style the class page_item and current_page_item.

/*Work around for IE*/
#navigation ul li{
width: 120px;
float: left;}

#navigation ul li a:hover{
display: block;
color: #000;
background-color: #fff;}

.page_item a:link, .page_item a:visited, .page_item a:hover, .page_item a:active{
display: block;
width: 120px;
float: left;
color: #fff;
background-color: #000;}

.current_page_item a:link, .current_page_item a:visited, .current_page_item a:hover , .current_page_item a:active {
display: block;
color: #000;
background-color: #fff;}