html - CSS meganav 子导航 div 位于父 div 的顶部

Question

我有一个带有悬停的垂直列表，它在右 Pane 中显示一个 div。我需要正确的 div 位于每个元素的包含 div 的顶部。

当前右侧的 div 位于列表项下方。 这是一个 fiddle DEMO

 <div id="main-nav">
  <ul>
    <li><a href="#">item</a>
      <div class="dropdown_3columns">
        <div class="col_1">
          <ul class="left-list">
            <li><a href="#">item</a>
              <div class="col_2">
                <h2>Colours</h2>
                <ul id="sub-main-nav">
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                </ul>
              </div>
            </li>
            <li><a href="#">item</a>
              <div class="col_2">
                <h2>item</h2>
                <ul id="sub-main-nav">
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                </ul>
              </div>
            </li>
            <li><a href="#">item</a>
              <div class="col_2">
                <h2>item</h2>
                <ul id="sub-main-nav">
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                </ul>
              </div>
            </li>
            <li><a href="#">item</a>
              <div class="col_2">
                <h2>item</h2>
                <ul id="sub-main-nav">
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                </ul>
              </div>
            </li>
            <li><a href="#">item</a>
              <div class="col_2">
                <h2>item</h2>
                <ul id="sub-main-nav">
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                </ul>
              </div>
            </li>
            <li><a href="#">item</a>
              <div class="col_2">
                <h2>item</h2>
                <ul id="sub-main-nav">
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                </ul>
              </div>
            </li>
            <li><a href="#">item</a>
              <div class="col_2">
                <h2>item</h2>
                <ul id="sub-main-nav">
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
        <div class="col_2">
          <ul class="right-list">
          </ul>
        </div>
      </div>
    </li>
  </ul>
</div>

我怎样才能让它这样做？

Answer 1

它似乎做你想做的事......但你没有注意到 h2 标签正在呈现它们继承自的白色文本

#main-nav li{
    ...
    color:#fff;
    .... }

可能的解决方案:

• 在 li 上放置背景色
• 更改 h2 的文本颜色 - 但要注意特殊性