フローティングイメージが正しくフローティングしていない

Question

私はそこにドロップダウンメニューを置く前にドロップダウンメニューを持っていますが、ログインイメージは正しく（右側に）フローティングされましたが、今は浮動しません。ログインイメージをどのように右に戻すには？

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); 
     } 
    ); 

}); 

私にはJavaScriptがそれとは何の関係もありませんが、念のために知っています。

Answer 1

あなた#loginが右に浮いているが、それは親<li>内右に浮遊しているが、このborderizedバージョンを見て、あなたが表示されます：

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

最も簡単な解決策は、<li>を右に浮かべて、<a>を少し調整して正しく配置することです。あなたはこれにCSSを変更することができます。

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

ライブ例：このような

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

し、HTML http://jsfiddle.net/ambiguous/qww58/

私が場所を確認できるように、私は子猫でログイン画像を置き換えそうだった。私は子猫が好きなので。あなたが犬を好む場合はhttp://placedog.com/に変更してください、犬もクールです。