0

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

基本上我的网站宽度约为。900px，并希望这个菜单完全适合。但是，目前它很短（FF 上的像素很少，而 IE 上的像素更多），因为我没有足够的菜单，并且一直在使用“&”来使其更接近。有没有一种方法可以在最后添加一个固定块（有点像一个假菜单），或者更好的是，一个 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]-->
4

3 回答 3

0

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

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

于 2012-08-22T02:30:13.467 回答
0

通过将宽度设置为 100%，我想我做到了：

http://jsfiddle.net/Qcny6/

看看，让我知道这是否是你所期望的

于 2012-08-20T12:50:48.927 回答
0

我随后通过在末尾添加一个小背景图像（在原始 div 之后）添加了一个临时修复，其中包含如下的 repeat-x 代码。它适用于我尝试过的所有浏览器，这很好，但我不知道这是否是最好的方法？在我的特定站点上还注意到，FF 中的 11px 字体大小比 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;
}
于 2012-08-20T21:21:04.457 回答