Can't Properly Float List To Right - html

Question

Edit Mission accomplished, thank you for your replies. If anyone can help me with the click to expand/fade to view feature, it would be very helpful. I'm currently looking into it.
I am working on a very simple navigation for my website. I can't figure out why the texts can't stick to the right. Here is an example: http://jsfiddle.net/E6ArK/
I also hope to add a click-to-expand and maybe a fade into view feature some time. Any help would be much appreciated.
HTML
<div class="navigation">
<ul>
<li>
<h1>Applications</h1>
<ul>
<li>Not Available</li>
<li>Not Available</li>
</ul>
</li>
<li>
<h1>Forum</h1>
<ul>
<li>Not Available</li>
<li>Not Available</li>
</ul>
</li>
<li>
<h1>Guilds</h1>
<ul>
<li>Not Available</li>
<li>Not Available</li>
</ul>
</li>
<li>
<h1>Imageboards</h1>
<ul>
<li>People</li>
<li>Random</li>
<li>Screen Shots</li>
<li>Wallpapers</li>
</ul>
</li>
<li>
<h1>Projects</h1>
<ul>
<li>Not Available</li>
<li>Not Available</li>
</ul>
</li>
</ul>
</div>
CSS
/* NAVIGATION */
/* Heading */
.navigation ul li h1 {
background : #000000;
color : #ffffff;
display : table;
font-weight : 100;
margin : 0;
padding : 6px;
border-right : 3px solid #ffffff;
font-size : 28px;
margin-bottom : 3px;
}
/* Positioning */
.navigation {
font-family :'Open Sans Condensed', sans-serif;
margin : 12px;
position : fixed;
right : 0;
top : 0;
}
.navigation ul {
font-size : 20px;
margin : 0;
padding : 0;
text-align : right;
}
.navigation ul li {
clear : right;
color : #ffffff;
float : right;
list-style-type : none;
}
/* Second Level */
.navigation ul li ul {
display : none;
}
.navigation ul li:hover ul {
display : block;
}
.navigation ul li ul li {
background : #000000;
border-right : 3px solid #ff0000;
color : #ffffff;
display : table;
font-size : 18px;
margin-bottom : 3px;
padding : 6px;
}

Answer 1

You need to float the heading to the right as well. Add float: right to your block of rules for .navigation ul li h1. That should keep them stuck to the right.

Answer 2

You simply need to add a float:right property to your heading styling:
/* Heading */
.navigation ul li h1 {
background : #000000;
color : #ffffff;
display : table;
font-weight : 100;
margin : 0;
padding : 6px;
border-right : 3px solid #ffffff;
font-size : 28px;
margin-bottom : 3px;
float: right;
}
Hope that helps