Can't Properly Float List To Right

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 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

Answer 2

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.