Floated image not floating correctly

Okay I have a drop down menu, before I put the drop down menu in there the login image floated correctly (to the right) but now it wont float at all. How would I make the login image go back to the right side?

HTML

<ul id="nav">
    <li><a href="#" class="activenav"><img src="../images/home.png" alt=""/></a></li>
    <li><a href="#"><img src="../images/image.png" alt=""/></a>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    <div class="clear"></div>
    </li>
    <li><a href="#"><img src="../images/image.png" alt=""/></a>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    <div class="clear"></div>
    </li>
    <li><a href="#"><img src="../images/image.png" alt=""/></a>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    <div class="clear"></div>
    </li>
    <li><a href="#" id="login"><img src="../images/login.png" alt=""/></a></li>
</ul>

CSS

#nav {
    background:url(../images/nav.png) repeat-x;
    margin:0;
    height:32px;
    padding:13px; /* specific due to the background image */
    padding-开发者_开发百科bottom:0;
    border-bottom:solid 1px rgba(0,0,0,.1);
    text-align:left; /* fixes text align */
}
#nav ul {
    margin:0;
    padding:0;
}
#nav img {
    margin:0;
    padding:0;
}
#nav a {
    color:rgb(255,255,255);
    text-decoration:none;
    padding:10px;
}
#nav a:hover {
    background:url(../images/navlink.png);
    border-radius:2px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
}
#nav a.activenav {
    background:url(../images/navlink.png);
    border-radius:2px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
}
#login {
    float:right;
    margin:-10px 0 0 0; /* important since #login is floating */
}
#nav #login:hover {
    background:transparent;
}
.clear {clear:both;} 
#nav li {
    float: left;
    position: relative;
}
#nav ul {
    background:url(../images/subnav.png);
    display: none;
    margin:13px 0 0 0;
    position:absolute;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}
#nav ul li {
    clear:both;
    margin:12px 10px;
    width:150px;
}
#nav ul li a {
    margin:5px 0;
}

JQUERY

$(document).ready(function() {
    // drop down
    $('#nav li').hover(
        function() {
            $('ul', this).stop(true, true).fadeIn(50);
        },
        function() {
            $('ul', this).fadeOut(200);
        }
    );

});

I know the javascript has nothing to do with it but just in case.

---

Your #login is floating to the right but it is floating to the right within its parent <li>, have a look at this borderized version and you'll see:

http://jsfiddle.net/ambiguous/YHs36/

The easiest solution is to float the <li> to the right and then adjust the <a> a bit to get it positioned properly. You can change the CSS to this:

#login {
    float: right !important; /* !important to override the float:left */
    margin:-10px 0 0 0; /* important since #login is floating */
}
#login a {
    display: block;
}

and then HTML like this:

<li id="login"><a href="#"><img ...></a></li>

Live example: http://jsfiddle.net/ambiguous/qww58/

I replaced the login image with a kitten so that I could see where it was. And because I like kittens. Feel free to change it to http://placedog.com/ if you prefer dogs, dogs are cool too.