Html 子弹式校准

我不知道如何让这个ul下拉菜单与我菜单的其余部分对齐

我已经从我的ul下拉列表中删除了，但是我的ul下拉列表保留了它的位置（如果我这样做，我怀疑ul下拉列表会一直到页面的左侧）

我已经尝试过设计这个ul下拉菜单，使其与我菜单的其余部分保持一致，但我无法理解这一点

我已经将

边距

和

填充

都设置为

0

，这导致下拉列表一直位于页面的左侧（如代码片段所示）

更改

边距

和

填充

的值1将其放在屏幕左侧，2将其放回原来的位置

$（'ul li.dropdown'）。悬停（函数（）{
$（this）.find（'.dropdown menu'）.stop（true，true）.delay（200）.fadeIn（500）；
}，函数（）{
$（this）.find（'.dropdown menu'）.stop（true，true）.delay（200）.fadeOut（500）；
});



















听起来您需要在这个元素结构中内联根元素的子元素。
您可以通过以下CSS实现这一点

.w3条块>*{display:inline块；}

。。。然而，如果所有这些菜单结构都是您的菜单，那么您可能会发现像这样标准化您的标记更简单

<ul class="menu">
    <li><a href="#" target="_blank">Link 1</a></li>
    <li><a href="#">link 2</a></li>
    <li>
      <a>DropdownHeader</a>
      <ul class="dropdown-menu">
         <li><a href="#">sub1</a></li>
         <li><a href="#">sub2</a></li>
         <li><a href="#">sub3</a></li>
         <li><a href="#">sub4</a></li>
            </ul>
    </li>
</ul>

.menu      { list-style-type: none; }
.menu > li { 
   vertical-align: top; 
   display: inline-block; 
   padding: 5px;
   background: #CCC;
}

.menu li > ul         { display: none; }
.menu li:hover > ul { display: block; }

这里有一个js小提琴，展示了它是如何工作的


。。。根据我认为您的要求，将鼠标悬停在您的下拉标题上，打开它包含的子菜单

假设菜单是“垂直”菜单而不是水平菜单，下面的html和css将获得相同的结果

html:


使用您的HTML结构（我不建议这样做），您可以通过执行以下操作来实现这一点

将菜单类添加到根目录处的div

<div class="w3-bar-block menu">

更新的小提琴链接：


.menu > li { 
   vertical-align: top;  
   padding: 5px;
   background: #CCC;
}

.menu li > ul         { display: none; }
.menu li:hover > ul { display: block; }

<div class="w3-bar-block menu">

.w3-bar-block > * { display: block; margin: 10px; }
.w3-bar-block > ul { margin-left: -30px; }
.w3-bar-block > ul > li { margin-left: 0; }