jquery - 下拉菜单未在标题下方对齐

Question

我正在尝试向我的网站添加一个下拉菜单。我通过这样组织 HTML 来做到这一点:

<ul class="topnav">

  <li>
       SECTION TITLE
       <ul class="subnav">
         <li>One</li>
         <li>Two</li>
       </ul>
  </li>

</ul>

我有这样的 CSS:

header ul.topnav li ul.subnav {
    position: absolute;
    left: 0; 
    top: 35px;
    background: blue;
    margin: 0;
    padding: 0;
    display: none;
    float: left;
    width: 16%;
    border: 1px solid black;
}

我设法使 jQuery 能够向下/向上滑动子菜单。我的问题在于样式:下拉菜单出现在屏幕的左边缘，而不是从“SECTION TITLE”下向下滑动。您也许可以从我的网站更好地了解我的问题:link here (菜单在顶部，鼠标悬停在元素上会显示子菜单)

因为 position: absolute 我希望 ul.subnav 相对于父元素出现，在这种情况下父 li 包含章节标题。但是看起来 ul.subnav 的位置是相对于左上角的。

Answer 1

问题是您需要将所有 topnavs li float 到左侧，但是您将 li 的子级不必要地 float 到左侧，例如带有 id 的部分，例如 whithacking 等。所有这些 float 左侧都将 topnav li 拉到最左边，您可以检查它在 chrome 中将鼠标悬停在 html 上。您需要删除所有这些 float 和宽度。删除 float 后， anchor 将自动调整宽度。用这个

ul.topnav > li{
position:relative;
float:left;
width:15%
}

然后设计你的左边