右對齊的CSS/jQuery的dropline菜單

我遇到了這個dropline菜單的麻煩 - 我怎麼能得到subnav與父項的右邊緣排隊？我想要實現會是這個樣子：右對齊的CSS/jQuery的dropline菜單

alt text

如果我的導航項目的左側懸停在第一個項目。這裏是一個示例代碼的鏈接。謝謝！

來源

2010-08-27 mike

我已經張貼在這裏演示：http://jsbin.com/onofo4

我認爲它您需要什麼，儘管懸停在「二」使父菜單跳一點點向左。我不知道爲什麼（現在已經很晚了，我很累，等等），但我會盡量明天解決這個問題。

我已經從下面的jsbin演示代碼複製了代碼，我認爲這是相當不言自明的，但如果您有任何問題隨時在評論中提出，我會盡我所能來幫助您。

代碼：

<!DOCTYPE html> 
<html> 
<head> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

    <script type="text/javascript"> 

    $(document).ready(
     function() { 

     } 
    ); 

    </script> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<style> 
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; } 

    #nav {width: 50%; } 

    li {border: 1px solid #ccc; padding: 0.2em 0.5em;} 
    li li {border: 0 none transparent; border-right: 1px solid #ccc; } 

    #nav > ul {list-style-type: none; text-align: right; } 
    #nav > ul > li {list-style-type:none; position: relative; display: inline; } 

    #nav > ul > li > ul {display: none; position: absolute; top: 1.8em; right: -1px; width: 15em; } 
    #nav > ul > li > ul > li {width: 15em; } 

    #nav > ul > li:hover > ul {display: block; } 
    #nav > ul > li:hover > ul > li {display: inline; } 
</style> 
</head> 
<body> 

    <div id="nav"> 
    <ul> 
     <li>First 
     <ul> 
      <li>Sub One</li> 
      <li>Sub Two</li> 
     </ul></li> 
     <li>Second 
     <ul> 
      <li>Sub Three</li> 
      <li>Sub Four</li> 
     </ul></li>  
    </ul> 
    </div> 

</body> 
</html>

來源

2010-08-28 01:47:26

不完全是我後，但我可以使它工作，我怎麼想...謝謝！ – mike 2010-08-30 18:09:13

很高興有幫助。我從來沒有看過這種奇怪的跳躍行爲，你是否解決了這個問題？ – 2010-08-30 18:59:45

右對齊的CSS/jQuery的dropline菜單

回答

相關問題