Question

苦苦寻找这个问题的答案。为基本的下拉菜单创建了一些html / css代码，但努力使其适合现有的宽度结构。

基本上我的网站宽度约为。 900px，并希望这个菜单完全符合。然而，它目前很短（FF上的几个像素，甚至IE上的更多像素），因为我没有足够的菜单，并且一直使用'＆amp;'来使它更接近。有没有一种方法可以在最后添加固定块（有点像假菜单），或者更好的是，背景颜色是100％（或固定的像素宽度）？我不介意它可能是最右边的纯色。希望这是有道理的。

HTML（示例）

<table cellpadding="5" cellspacing="0" width="100%" border="0">
    <tr>
        <td>
            <div id="nav">
                <ul>
                    <li><a href="" title="">Link 1</a></li>
                    <li><a href="" title="">Link 2</a>
                        <ul>
                            <li><a href="" title="">Link 2-1</a></li>
                            <li><a href="" title="">Link 2-2</a></li>
                            <li><a href="" title="">Link 2-3</a></li>
                        </ul>
                    </li>
                    <li><a href="" title="">Link 3</a>
                        <ul>
                            <li><a href="" title="">Link 3-1</a></li>
                            <li><a href="" title="">Link 3-2</a></li>
                            <li><a href="" title="">Link 3-3</a></li>
                            <li><a href="" title="">Link 3-4</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </td>
    </tr>
</table>

CSS

#nav ul {
    font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
    margin: 0;
    padding: 0;
    list-style: none;
}
#nav ul li {
    display: block;
    position: relative;
    float: left;
}
#nav li ul {
    display: none;
}
#nav ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    padding: 5px 15px 6px 15px;
    background: #2a8bc6;
    white-space: nowrap;
    background: url('images/menu_off.gif') 100% 0 repeat-x;
}
#nav ul li a:hover, #nav ul li a.sfhover {
    background: #56595c;
}
#nav li:hover ul, #nav li.sfhover ul {
    display: block;
    position: absolute;
    z-index: 3;
}
#nav li:hover li, #nav li.sfhover li {
    float: none;
    font-size: 12px;
    font-weight: normal;
    border-top: 1px solid #959a9d;
}
#nav li:hover a, #nav li.sfhover a {
    background: #56595c;
    opacity: 0.9;
}
#nav li:hover li a:hover, #nav li.sfhover li a.sfhover {
    background: #2a8bc6;
}
<!--[if lte IE 8]>
#nav ul li {
    position: inherit;
}
<![endif]-->
<!--[if lte IE 7]>
#nav ul li {
    background: url(none);
}
<![endif]-->

Answer 1

通过将一些宽度设置为100％，我想我做了诀窍：

http://jsfiddle.net/Qcny6/

看一下，让我知道它是否符合您的预期

Answer 2

我随后通过在末尾（在原始div之后）添加一个小背景图像并使用repeat-x代码添加了一个临时修复，如下所示。它适用于我尝试的所有浏览器，这很好，但我不知道这是不是最好的方法？在我的特定网站上也注意到，11px的字体大小在FF中略大于IE，这意味着我使用的实际背景图像（带缓冲区）在FF中为26px，在IE中为24px。任何想法如何将背景图像固定到确切的大小，因为我知道设置字体大小并不容易。

用于加载项的代码：

HTML

<div id="navend"><img src="{$images_dir}/menu_off.gif" border="0" alt="" /></div>

CSS

#navend {
background: url('images/menu_off.gif') repeat-x;
}

Answer 3

CSS中的块级元素会自动填充其容器。如果我理解你的问题，你可以在菜单的右侧有一个纯色。因此，基本上，您希望将菜单放入容器中并使菜单跨越整个宽度，但不一定具有相同的菜单项宽度。如果是这样的话，我拿了一个我之前用过的jsfiddle来展示如何在css的子菜单上添加向下/向右箭头，并展示如果它位于某个宽度的容器中，它确实会填满整个容器。您可以通过更改CSS中#existingContainer项的宽度来测试它。你会看到灰色栏（与菜单相关）延伸到填满整个空间。

http://jsfiddle.net/w9xnv/3/

下拉菜单宽度100％

3 个答案: