[sunfighter]

It might be easier on you to rotate 270 degrees. The text will line up like you want, but will read from top to bottom.

You could also try to position each text individually instead of all three together with the .nav class.

.nav1{
	display: block;
	position: relative;
	top: 70px;
	white-space: nowrap;
	-webkit-transform: rotate(-90deg);
	-webkit-transform-origin: bottom right;
	-moz-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.nav2{
	display: block;
	position: relative;
	top: 100px;
	white-space: nowrap;
	-webkit-transform: rotate(-90deg);
	-webkit-transform-origin: bottom right;
	-moz-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.nav3 {
	display: block;
	position: relative;
	top: 60px;
	white-space: nowrap;
	-webkit-transform: rotate(-90deg);
	-webkit-transform-origin: bottom right;
	-moz-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

for HTML:

<div id="leftcolumn">
<div class="navbar" style="background-color:#900;margin-left:10px;"><h3 class="nav1">Merchandise</h3></div>
<div class="navbar" style="background-color:#090;"><h3 class="nav2">Training Boards</h3></div>
<div class="navbar" style="background-color:#009;"><h3 class="nav3">Contact Us</h3></div>
</div>

I don't like using <a> for the text. <a> is for an anchor!