UL 子弹样式对齐

Question

我无法弄清楚如何让这个ul下拉菜单与我的菜单的其余部分保持一致。

我已经从我的 ul 下拉列表中删除了项目符号，但我的 ul 下拉菜单保留了它的位置(如果我这样做，我怀疑 ul 下拉菜单会一直到页面的左侧)。

我试图设置此ul下拉菜单的样式以与菜单的其余部分保持一致，但我无法弄清楚这一点。

我已经将margin和padding都设置为0这导致下拉列表一直到我的页面左侧(如代码片段所示)。

更改margin的值，padding1将其放回屏幕左侧，或2将其放回原来的位置。

$('ul li.dropdown').hover(function() {

$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js" integrity="sha384-feJI7QwhOS+hwpX2zkaeJQjeiwlhOP+SdQDqhgvvo1DsjtiSQByFdThsxO669S2D" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- this uses list-style-type: none; which results in not having a bullet ( my goal) but not aligning to the other links correctly-->
<div class="w3-bar-block">
<a href="#" target="_blank" class="w3-bar-item w3-button w3-padding"><i class="fa fa-users fa-fw"></i>  Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-user fa-fw"></i>  link 2</a>
	  <ul style="list-style-type: none;">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-dashboard fa-fw"></i>  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>
</div>
<!-- this uses list-style-type: none; padding: 0; and margin-0; which results in not having a bullet ( my goal) but not aligning to the other links correctly either. Does not matter what you change padding and margin to it will either stay to the left side of the screen or jump back to *original postion*-->
<div class="w3-bar-block">
<a href="#" target="_blank" class="w3-bar-item w3-button w3-padding"><i class="fa fa-users fa-fw"></i>  Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-user fa-fw"></i>  link 2</a>
	  <ul style="list-style-type: none; padding: 0; margin-0;">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-dashboard fa-fw"></i>  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>
</div>

Answer 1

听起来您需要内联作为此元素结构中根元素的子元素的元素。 您可以使用以下 CSS 实现此目的...

.w3-bar-block> * { display： inline-block; }

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

<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>

然后像这样使用 css...

.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小提琴，显示了它是如何工作的...

https://jsfiddle.net/sgh0tLv0/9/

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

假设菜单是"垂直"菜单而不是水平菜单，以下 html 和 css 将达到相同的结果......

.html：

<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>

.css：

.menu > li { 
vertical-align: top;  
padding: 5px;
background: #CCC;
}
.menu li > ul         { display: none; }
.menu li:hover > ul { display: block; }

。

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

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

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

。然后添加以下 CSS(除了上面的菜单 css)...

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

更新的小提琴链接：

https://jsfiddle.net/sgh0tLv0/19/