我一直在工作的网站一直在挑选所有东西，因为我希望这对于我的第一份专业工作来说是一个非常干净且良好的网站。唯一让我烦恼的是，我的导航栏具有悬停下拉菜单，并且与公司徽标重叠。我想知道CSS中是否有办法使下拉菜单开始降低12px？
<div class="col-md-11 col-sm-12 text-left-xs text-left-sm ">
<div class="bar__module" >
<ul class="menu-horizontal ">
<li class="dropdown dropdown--hover "><a href="/motors/shop.aspx">Shop</a><span class="dropdown__trigger"></span>
<div class="dropdown__container">
<div class="container">
<div class="row">
<div class="dropdown__content col-md-12 text-left" style="background: linear-gradient(#E9E9E9, #ffffff);">
<div class="col-md-3 hidden-xs ">
<img alt="" src="../photosvideos/sidewindernewpics/Sw shield side copy.png" style="margin-bottom: -18px;" />
</div>
<div class="col-md-3 text-left">
<h5>Products</h5>
<ul class="menu-vertical">
<li><a href="/motors">About The Sidewinder</a></li>
<li><a href="/motors/shop.aspx">Shop</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
Example of what is happening
I want that edge to be lower so that it doesn't touch the logo
最佳答案
实际上，在CSS中有多种方法可以将元素下移12px：
通过使用margin-top: 12px
通过使用padding-top: 12px
通过使用border-top: 12px solid transparent（或虚线，点线等）
通过使用relative位置和top: 12px
通过使用absolute位置和top: 12px
通过使用fixed位置和top: 12px
通过使用transform: translateY(12px)
没有更多的代码，很难告诉您哪种解决方案最适合您的情况。
关于javascript - 我如何获得HTML下拉列表以从较低位置开始，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54331903/