如何获得 HTML 下拉菜单以降低开始答案

【问题标题】：How do I get a HTML drop down to start lower如何获得 HTML 下拉菜单以降低开始
【发布时间】：2019-01-23 16:43:01
【问题描述】：

我一直在努力的网站我对所有内容都非常挑剔，因为我希望这是一个非常干净和好的网站，适合我的第一份专业工作。唯一让我烦恼的是我的导航栏有悬停下拉菜单，它与公司的标志重叠。我想知道在 CSS 中是否有办法让下拉菜单开始低约 12 像素？

<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

【问题讨论】：

使用margin-top 或将元素定位为除静态以外的任何位置并使用top。或者把padding-top放在父节点上
如果您发布代码，也许我们可以帮助您修复它。现在我们能做的就是猜测你的代码需要什么。

标签： javascript html css navbar dropdown

【解决方案1】：

实际上有多种方法可以在 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)

如果没有更多代码，就很难告诉您这些解决方案中的哪一个最适合您的情况。

【讨论】：

抱歉，我自己从来没有写过堆栈溢出问题，但我的问题是我似乎无法弄清楚我需要在什么元素中添加边距/填充/边框得到我想要的结果。
我不知道您页面中的其他样式，但我会尝试更改以下任一样式：dropdown__container 或 content 或 row 或 dropdown__content。看起来好像您正在使用某种框架（引导程序？），所以不要更改他们的代码 - 您会希望在自己的 CSS 文件中包含已更改的内容，因为否则，当您更新框架时，您会丢失所有更改。最有可能的是，我会向需要更改的元素添加一个特殊的类，并通过该类应用我的更改。

【解决方案2】：

如果没有问题的说明就很难提供帮助，您还应该包含一些代码以使其更易于理解并帮助您解决问题。

无论如何，要在页面上向下移动元素，有几种方法。一种，可能是最常见的方法是使用 margin-top。

.moveDown 
{
   margin-top: 12px;
}

如果你的下拉菜单/元素没有移动，它可能与你设计的位置有关（如果没有任何代码/图片，我很难回答......）

【讨论】：