Question

我有一个悬停的垂直列表，在右侧窗格中显示一个div。我需要正确的div来坐在每个项目的包含div的顶部。

目前正确的div位于列表项下方。这是一个小提琴 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 s
更改h2的文字颜色 - 但要注意特异性

CSS meganav sub-nav div位于父div的顶部

1 个答案: