如何从菜单栏的边界开始下拉，而不是直接在文本下方显示

Question

我已经为我的网页创建了菜单标头的小提琴。我已经看到了这张图像。单击PROGRAMS和WORLD OF NORTHMAN后，它应该下拉并显示元素，但它只能从该标头的边框开始下拉列表，这就是我无法使其正常工作。

以下是我的HTML代码：

<div class="topnav">
  <img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
  <nav>
    <ul>
      <li class="dropdown">
        <a href="#"><b>PROGRAMS</b> <i class="fa fa-angle-down"></i></a>
        <ul class="dropdown-content">
          <li><a href="#"><i>INDIVIDUAL</i></a>
          </li>
          <li><a href="#"><i>CORPORATE</i></a>
          </li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#"><b>WORLD OF NORTHMAN</b> <i class="fa fa-angle-down"></i></a>
        <ul class="dropdown-content">
          <li><a href="#"><i>BE EXTRODINARY</i></a>
          </li>
          <li><a href="#"><i>RISK &amp; REWARD</i></a>
          </li>
          <li><a href="#"><i>BLOG</i></a>
          </li>
          <li><a href="#"><i>OUR STORY</i></a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

如何确保下拉菜单从该菜单的边框开始，而是直接来自每个文本？

Answer 1

尝试将margin-top: 14px添加到.topnav ul > li > ul选择器：

.topnav ul > li > ul {
  display: none;
  margin-top: 14px;
  width: 200px;
  padding: 0;
  position: absolute;
  background-color: #f76c38;
}

https://jsfiddle.net/2nv4dd2w/15/

作为加号，如果要关闭其他打开的菜单：https：//jsfiddle.net/2nv4dd2w/16/

Answer 2

只需添加此

.dropdown-content{ margin-top:14px; }

Answer 3

您需要将填充物添加到.topnav a而不是.topnav ul > li。https://jsfiddle.net/2nv4dd2w/14/。这是因为ul HTML标签位于a HTML标签下方。如果要保持background-color相同的尺寸，请使用a标签的保证金，而不是padding，但我认为在我看来，它看起来更好：(

编辑：更新带有inline-block图像和导航的小提琴。https://jsfiddle.net/2nv4dd2w/19/。这应该使您接近想要的东西。其余的取决于你。快乐的编码。