Question

我创建了一个带有两个子菜单的下拉导航。

我试图让第二个子菜单从顶部开始（位于主导航/黑色条的下方），而不是它当前的位置，但我不知道该怎么做。

这是我制作的代码集http://codepen.io/anon/pen/ByaaYM

例如，如果您将鼠标悬停在个人＆gt;之上大篷车或个人＆gt;家庭＆amp;属性，子菜单的顶部应位于相同的位置，就在黑条的下方。

非常感谢任何帮助

这是我希望实现的结果http://codepen.io/anon/pen/OPJPNL - 请注意，当悬停时，子菜单会直接冲到黑条下方。

代码......

HTML

    <ul>
  <li>
    <a href="#">Personal</a>
    <ul class="dropdown-menu">
      <li data-submenu-id="submenu-patas">
        <a href="#">Boat</a>
      </li>
      <li data-submenu-id="submenu-snub-nosed1">
        <a href="#">Caravan</a>
        <ul id="submenu-snub-nosed1">
          <li><a href="#">Motor Home</a></li>
          <li><a href="#">Touring Caravan</a></li>
          <li><a href="#">Static Leisure</a></li>
          <li><a href="#">Trailer Tent</a></li>
        </ul>
      </li>
      <li data-submenu-id="submenu-snub-nosed">
        <a href="#">Home & Property</a>
         <ul id="submenu-snub-nosed">
          <li><a href="#">Beach Hut</a></li>
          <li><a href="#">Buy To Let</a></li>
          <li><a href="#">Foster Home</a></li>
          <li><a href="#">High Net Worth</a></li>
        </ul>
      </li>
      <li><a href="#">Military</a></li>
      <li><a href="#">Motor</a></li>
      <li><a href="#">More</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Business</a>
    <ul class="dropdown-menu">
      <li data-submenu-id="submenu-snub-nosed4">
        <a href="#">Care & Medical</a>
        <ul id="submenu-snub-nosed4">
          <li><a href="#">Motor Home</a></li>
          <li><a href="#">Touring Caravan</a></li>
          <li><a href="#">Static Leisure</a></li>
          <li><a href="#">Trailer Tent</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Financial</a>
      </li>
      <li data-submenu-id="submenu-snub-nosed3">
        <a href="#">Liability</a>
         <ul id="submenu-snub-nosed3">
          <li><a href="#">Beach Hut</a></li>
          <li><a href="#">Buy To Let</a></li>
          <li><a href="#">Foster Home</a></li>
          <li><a href="#">High Net Worth</a></li>
        </ul>
      </li>
      <li><a href="#">Property</a></li>
      <li><a href="#">Trade Specific</a></li>
    </ul>
  </li>
  <li><a href="#">Infozone</a></li>
</ul>

CSS

      * {
    box-sizing:border-box;
  }

  body {
    font-family: sans-serif;
  }


  ul ul {
    display: none;
  }

  ul li:hover > ul {
    display: block;
  }

  ul {
    background: #333; 
    padding: 0 10px; 
    list-style: none;
    position: relative;
    display: inline-block;
  }
    ul:after {
      content: ""; clear: both; display: block;
    }

  ul li {
    float: left;
  }
    ul li:hover {
      background: #4b545f;
      background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
      background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
      background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
    }
    ul li:hover a {
        color: #fff;
      }

  ul li a {
      display: block; 
      padding: 25px 40px;
      color: #fff; 
      text-decoration: none;
    }

  ul ul {
    background: #5f6975; border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
  }
  ul ul li {
      float: none; 
      border-top: 1px solid #6b727c;
      border-bottom: 1px solid #575f6a;
      position: relative;
    }
  ul ul li a {
        padding: 20px;
        color: #fff;

      } 
      ul ul li a:hover {
          background: #4b545f;
        }

  ul ul ul {
    position: absolute; left: 100%; top:-100%;
    width: 230px;
    padding: 10px;

  }
  ul ul ul li {
    display: inline-block;
    width: 49%;
  }

  .dropdown-menu > li {
    width: 200px;
  }

Answer 1

如果我理解正确，你会遇到填充问题。如果从中删除填充：

ul ul ul {
  position: absolute; left: 100%; top:-100%;
  width: 230px;
  padding: 10px;
}

这是updated CodePen

Answer 2

尝试以下Html代码

您需要为每个内部margin-top

<ul>

`

<ul>
  <li>
    <a href="#">Personal</a>
    <ul class="dropdown-menu">
      <li data-submenu-id="submenu-patas">
        <a href="#">Boat</a>
      </li>
      <li data-submenu-id="submenu-snub-nosed1">
        <a href="#">Caravan</a>
        <ul id="submenu-snub-nosed1" style="margin-top:-60px;"> 
          <li><a href="#">Motor Home</a></li>
          <li><a href="#">Touring Caravan</a></li>
          <li><a href="#">Static Leisure</a></li>
          <li><a href="#">Trailer Tent</a></li>
        </ul>
      </li>
      <li data-submenu-id="submenu-snub-nosed">
        <a href="#">Home & Property</a>
         <ul id="submenu-snub-nosed" style="margin-top:-120px;"> 
          <li><a href="#">Beach Hut</a></li>
          <li><a href="#">Buy To Let</a></li>
          <li><a href="#">Foster Home</a></li>
          <li><a href="#">High Net Worth</a></li>
        </ul>
      </li>
      <li><a href="#">Military</a></li>
      <li><a href="#">Motor</a></li>
      <li><a href="#">More</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Business</a>
    <ul class="dropdown-menu">
      <li data-submenu-id="submenu-snub-nosed4">
        <a href="#">Care & Medical</a>
        <ul id="submenu-snub-nosed4">
          <li><a href="#">Motor Home</a></li>
          <li><a href="#">Touring Caravan</a></li>
          <li><a href="#">Static Leisure</a></li>
          <li><a href="#">Trailer Tent</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Financial</a>
      </li>
      <li data-submenu-id="submenu-snub-nosed3">
        <a href="#">Liability</a>
         <ul id="submenu-snub-nosed3" style="margin-top:-120px;"> 
          <li><a href="#">Beach Hut</a></li>
          <li><a href="#">Buy To Let</a></li>
          <li><a href="#">Foster Home</a></li>
          <li><a href="#">High Net Worth</a></li>
        </ul>
      </li>
      <li><a href="#">Property</a></li>
      <li><a href="#">Trade Specific</a></li>
    </ul>
  </li>
  <li><a href="#">Infozone</a></li>
</ul>

`

将子菜单修复到导航的顶部

2 个答案: