CSS 下拉菜单中的定位、块大小和背景

Question

这可能很容易。我查看了以前的问题（以及网络上的其他地方），但找不到解决当前问题的好方法。

我正在尝试使用基于列表的 CSS 居中下拉菜单。没什么复杂的。

这个one 有一个非常简单的解决方案，但我找不到我做错了什么。

此时我有两个问题（它主要在第一个列表中，还没有真正查看列表中的链接）： (1) 我希望列表的背景是一个大矩形，包含子列表中的所有项目 (2)子列表中的项目被“截断”，插入新行，使宽度不超过列表标题的宽度。

谢谢。

CSS 部分

#navbar ul {
    text-align: center;
    width: 100%;
    font-variant: small-caps;
    padding: 5px 0;
    margin-top: 0;
    margin-left: 0;
    }
#navbar ul li {
    background-color: #ccc;
    margin-right: 2%;
    color: #069;
    text-decoration: none;
    position: relative;
    display: inline;
    padding: 5px 4px;
    }
#navbar li a {
    text-decoration: none; }
#navbar li ul {
    display: none; 
    }
#navbar li:hover ul, #navbar li.hover ul {
    display: block;
    position: absolute;
    text-align: left;
    margin: 8px 0 0 0;
    padding: 0;
    background-color: #eee; }
#navbar li:hover li, #navbar li.hover li {
    padding: 4px 0;
    clear: left;
    }
#navbar li:hover li a, #navbar li.hover li a {
    background-color: #eee;
    border-bottom: 1px solid #fff;
    color: #000; }
#navbar li li a:hover {
    background-color: #333; }

HTML 部分

   <div id="navbar">
    <ul>
        <li>
            <a href="#" title="">Link 1</a>
        <ul>
                <li>item 1.1 and more</li>
                <li>item 1.2</li>
                <li>item 1.3</li>
                <li>item 1.4 truncated?</li>
                <li>item 1.5</li>
                <li>item 1.6</li>
        </ul>

        </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>
                <li><a href="#" title="">Link 2.4</a></li>
                <li><a href="#" title="">Link 2.5</a></li>
                <li><a href="#" title="">Link 2.6</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>
                <li><a href="#" title="">Link 3.5</a></li>
                <li><a href="#" title="">Link 3.6</a></li>
        </ul>
    </li>
</ul>
</div>

Answer 1

1) 看起来您已经有了一个背景矩形。你只是想要更多的填充？ 如果是这样，请像这样添加填充：

#navbar li:hover ul, #navbar li.hover ul {padding:10px}

2) 至于截断，试试

#navbar li:hover ul, #navbar li.hover ul {word-wrap: break-word;}

不过，我建议您看看这篇文章，以帮助您使用下拉菜单：http://matthewjamestaylor.com/blog/centered-dropdown-menus

编辑：不幸的是，自动换行是 CSS3 属性，并非所有浏览器都支持。此外，使用跨浏览器 CSS 的自动换行似乎并不简单。这个帖子word wrap in css / js 有更多信息。