html - CSS Position 元素相对于其他两个

Question

是否可以仅使用 CSS 将元素相对于一个元素水平放置，而相对于另一个元素垂直放置？我正在尝试向我的导航栏添加一个下拉菜单。但是，子菜单没有正确对齐。我想定位元素 A，使其左边缘与元素 B 的左边缘对齐，但我希望元素 A 的上边缘与元素 C 的下边缘对齐。

基本上，我希望它位于标题下，与列表元素对齐(图像已编辑):

我有以下代码:

#header{
  padding: 0.125em;     
  background: #eee;         /* Styling for clarity */
}
nav{
  display: inline;          /* Makes nav inline */
}
h1{
  display: inline;          /* Makes the main title inline */
}
#header ul{
  padding:0;                /* Clears the space around the list */
  display: inline;          /* Makes lists inline */
}
#header li{
  display: inline;          /* Makes list items inline */
  list-style-type: none;    /* Removes bullets */
}
#header ul>li>.submenu>li{
  display: block;           /* Makes submenu list items behave normally */
}
#header ul>li>.submenu{
  display: none;            /* Hides the submenu */
  position: absolute;       /* Enables positioning */
  top: 100%;                /* Position directly under - SHOULD BE UNDER HEADER */
  left: 0;                  /* Align left edge - SHOULD BE ALIGNED WITH ANCESTOR LIST ITEM */
  background: #ccc;         /* Styling for clarity */
}
#header ul>li:hover>.submenu{
  display: block;           /* Shows the submenu */
}

<header id="header">
  <nav>
    <ul>
      <li>
        <a>
          <h1>
            <img>TITLE
          </h1>
        </a>
      </li>
      <li>
        <a>PAGE</a>
      </li>
      <li>
        <a>PAGE</a>
        <ul class="submenu">
          <li><a>PAGE</a></li>
          <li><a>PAGE</a></li>
          <li><a>PAGE</a></li>
        </ul>
      </li>
      <li>
        <a>PAGE</a>
      </li>
    </ul>
  </nav>
</header>

现在，要使定位有所作为，我必须选择要对其进行定位的元素。但是，如果我用列表元素来做，子菜单会太靠上，因为它位于列表元素下方，并且标题有一些填充。

#header li {
    position: relative; /* Positioning will be relative to the ANCESTOR LIST ITEM */
}

#header{
  padding: 0.125em;     
  background: #eee;         /* Styling for clarity */
}
nav{
  display: inline;          /* Makes nav inline */
}
h1{
  display: inline;          /* Makes the main title inline */
}
#header ul{
  padding:0;                /* Clears the space around the list */
  display: inline;          /* Makes lists inline */
}
#header li{
  display: inline;          /* Makes list items inline */
  list-style-type: none;    /* Removes bullets */
  position: relative;       /* Positioning will be relative to the ANCESTOR LIST ITEM */
}
#header ul>li>.submenu>li{
  display: block;           /* Makes submenu list items behave normally */
}
#header ul>li>.submenu{
  display: none;            /* Hides the submenu */
  position: absolute;       /* Enables positioning */
  top: 100%;                /* Position directly under - SHOULD BE UNDER HEADER */
  left: 0;                  /* Align left edge - SHOULD BE ALIGNED WITH ANCESTOR LIST ITEM */
  background: #ccc;         /* Styling for clarity */
}
#header ul>li:hover>.submenu{
  display: block;           /* Shows the submenu */
}

<header id="header">
  <nav>
    <ul>
      <li>
        <a>
          <h1>
            <img>TITLE
          </h1>
        </a>
      </li>
      <li>
        <a>PAGE</a>
      </li>
      <li>
        <a>PAGE</a>
        <ul class="submenu">
          <li><a>PAGE</a></li>
          <li><a>PAGE</a></li>
          <li><a>PAGE</a></li>
        </ul>
      </li>
      <li>
        <a>PAGE</a>
      </li>
    </ul>
  </nav>
</header>

这是结果:与列表元素对齐

如果我用标题来做，子菜单将与整个标题的左侧对齐，这不是我想要的。

#header {
    position: relative; /* Positioning will be relative to the HEADER */
}

#header{
  padding: 0.125em;     
  background: #eee;         /* Styling for clarity */
  position: relative;       /* Positioning will be relative to the HEADER */
}
nav{
  display: inline;          /* Makes nav inline */
}
h1{
  display: inline;          /* Makes the main title inline */
}
#header ul{
  padding:0;                /* Clears the space around the list */
  display: inline;          /* Makes lists inline */
}
#header li{
  display: inline;          /* Makes list items inline */
  list-style-type: none;    /* Removes bullets */
}
#header ul>li>.submenu>li{
  display: block;           /* Makes submenu list items behave normally */
}
#header ul>li>.submenu{
  display: none;            /* Hides the submenu */
  position: absolute;       /* Enables positioning */
  top: 100%;                /* Position directly under - SHOULD BE UNDER HEADER */
  left: 0;                  /* Align left edge - SHOULD BE ALIGNED WITH ANCESTOR LIST ITEM */
  background: #ccc;         /* Styling for clarity */
}
#header ul>li:hover>.submenu{
  display: block;           /* Shows the submenu */
}

<header id="header">
  <nav>
    <ul>
      <li>
        <a>
          <h1>
            <img>TITLE
          </h1>
        </a>
      </li>
      <li>
        <a>PAGE</a>
      </li>
      <li>
        <a>PAGE</a>
        <ul class="submenu">
          <li><a>PAGE</a></li>
          <li><a>PAGE</a></li>
          <li><a>PAGE</a></li>
        </ul>
      </li>
      <li>
        <a>PAGE</a>
      </li>
    </ul>
  </nav>
</header>

这是它的样子:在标题下

所以，我想要的是“top: 100%;”与整个标题和“left: 0;”相关与子菜单是子菜单的列表元素相关。

我希望我的问题很清楚。我找不到以前问过这个问题的人。很抱歉，我无法在问题中放置图片或更多链接，因为这是我的第一个问题，所以我没有足够的声誉。

感谢阅读我的问题，希望能尽快得到解答!

Answer 1

这是 fiddle :http://jsfiddle.net/td6Las4x/

只需为“#header”添加“position:relative”，为“#header ul > li > .submenu”和“display: inline-block;”移除“left:0”对于“#header li”

#header li {
    display: inline-block;
}