Question

我在使用position: fixed;的水平下拉菜单时出现问题，该菜单与屏幕底部相连（在这个意义上是一个'下拉菜单'）。

由于它是一个下拉菜单，我必须指定background-color:以使菜单内容与上面的页面内容重叠，在此演示案例中从white;更改为red;。到目前为止，第二级容器具有position: absolute;，它工作正常，但子级别的宽度不反映其父级 - 这是根据文本的自动计算宽度与{的组合生成的{1}}和padding-left: 35px;因此未知 - 使最终结果难看≈根据其子内容进行不同padding-right: 35px; - 宽度计算的不同背景长度，只要ul -sublevel菜单是ul。

如果我将position: absolute;设置更改为display:，则所有下拉列表的宽度将等于其父级，但随后定位将被搞砸并低于页面底部，因为这不是一个下拉菜单，因此是一种不常见的线性解码方案。

其他人建议我使用CSS3和relative; - 属性，但在我看来，这更像是一个黑客，而不是一个实际的逻辑解决方案。如果有可能，我想避免使用除CSS以外的任何东西，因为这是一个学校项目，教育主要是图形化的，不是面向编程或脚本。

以下是代码：

HTML

rotate

CSS

<div id="wrapper">
    <div id="header">
        <!-- irrelevant code removed -->
    </div>
    <div id="menu">
        <!-- irrelevant code removed -->
    </div>
    <div id="main">
        <p>
            <!-- PAGE CONTENT GOES HERE -->
        </p>
    </div>
    <div id="footer">
        <div class="hline"></div>
        <ul class="lv1">
            <li>
                <a href="#">Br&aelig;ndeovne</a>
                <ul class="lv2">
                    <li><a href="#">Contura Hand&ouml;l</a></li>
                    <li><a href="#">Danfire</a></li>
                    <li>
                        <a href="#">HETA &ensp;&darr;</a>
                        <ul class="lv3">
                            <li><a href="#">Scan-Line</a></li>
                            <li><a href="#">Scandia</a></li>
                            <li><a href="#">VisionView</a></li>
                            <li><a href="#">TIPI</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Hwam Heat Design</a></li>
                    <li><a href="#">Varde Ovne</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Pilleovne</a>
                <ul class="lv2">
                    <li><a href="#">EdilKamin Pilleovne</a></li>
                    <li><a href="#">Heta Greenfire</a></li>
                    <li><a href="#">Tr&aelig;piller</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Pejseindsatse</a>
                <ul class="lv2">
                    <li><a href="#">HETA</a></li>
                    <li><a href="#">HWAM</a></li>
                    <li><a href="#">METEOR</a></li>
                    <li><a href="#">SPARTHERM</a></li>
                    <li><a href="#">VARDE</a></li>
                    <li><a href="#">WIKING</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Skorstene</a>
            </li>
            <li>
                <a href="#">Tilbeh&oslash;r</a>
                <ul class="lv2">
                    <li><a href="#">Gulvplader</a></li>
                    <li><a href="#">HWAM</a></li>
                    <li><a href="#">Dansk Design</a></li>
                </ul>
            </li>
            <li>
                <a href="#">R&oslash;gsuger</a>
            </li>
            <li>
                <a href="#">Service</a>
            </li>
        </ul>
        <div class="hline"></div>
    </div>
</div>

Answer 1

定位您的顶级LI亲戚，并将第二级UL的宽度设为100％：

#footer .lv1 > li {
  /* … */
  position:relative;
}
#footer li:hover > ul.lv2 {
  /* … */
  bottom:26px;
  width:100%;
}

http://jsfiddle.net/7tALM/3/

（下次，请自行提供您的代码。）

CSS：具有绝对定位的下拉菜单

HTML

CSS

1 个答案: