Question

我无法弄清楚如何让这个ul下拉列表与菜单的其余部分对齐。

我从我的ul下拉列表中删除了Bullet ，但我的ul下拉列表保持了它的位置（我怀疑ul下拉列表一直到页面的左侧，如果我这样做的话< / em>的）。

我尝试将此ul下拉列表设置为与菜单的其余部分对齐，但我无法弄清楚这一点。

我已将margin和padding两者都设置为0，这导致下拉列表一直显示在我的页面左侧（，如片段中所示< / em>的）。

更改margin和padding的值 1 将其置于屏幕左侧或 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>  <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>  <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＆gt; * {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/

UL子弹样式对齐

1 个答案: