右对齐的CSS/jQuery的dropline菜单

问题描述：

我遇到了这个dropline菜单的麻烦 - 我怎么能得到subnav与父项的右边缘排队？我想要实现会是这个样子：右对齐的CSS/jQuery的dropline菜单

alt text

如果我的导航项目的左侧悬停在第一个项目。这里是一个示例代码的链接。谢谢！

答

我已经张贴在这里演示：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>

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

很高兴有帮助。我从来没有看过这种奇怪的跳跃行为，你是否解决了这个问题？ – 2010-08-30 18:59:45

右对齐的CSS/jQuery的dropline菜单

相关推荐