Question

我在使用此下拉菜单时遇到问题 - 如何让subnav与父项的右边缘对齐？我想要实现的目标看起来像这样：

alt text

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

Answer 1

我在这里发布了一个演示： 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>

右对齐的CSS / jQuery dropline菜单

1 个答案: