html - 内联显示 li 元素向左浮动

Question

我希望在我的列表上方有一个悬停框，以便它们可以并排显示字母。此 link 中显示了一个示例，每当我将鼠标光标放在“标题”一词上时，我就会并排显示 A、B、C 和更多内容。

我如何通过调整 css 来实现这一点？

到目前为止，我只能按垂直顺序显示 A、B、C。目前的 CSS:

#topbar{
    width: 80%;
    list-style-type: none;
}
#topbar > li:hover ul { display: inline;}

#topbar > li {
        float: left;
        margin-left: 20px; 
        margin-right: 20px;
        font-family:"Georgia";
}
#topbar > li > ul {
        float:left;
        display: none;
        top:32px;
        position: absolute; border-style:solid; padding-left:10px; padding-right:10px;
        border-width:1px; background-color:white;list-style-type: none;}     
}

还有我的 ul 和 li 代码:

<ul id="topbar">
     <li> <a href="#">Title</a>
        <ul>
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
            <li><a href="#">D</a></li>
            <li><a href="#">E</a></li>
            <li><a href="#">F</a></li>
            <li><a href="#">G</a></li>
            <li><a href="#">H</a></li>
            ,,,
        </ul> 
    </li>
    <li> <a href="#">Type</a>
        <ul>
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
        </ul>
    </li>
    <li> <a href="#">Format</a>
        <ul>
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
        </ul>
    </li>
</ul>

Answer 1

要使 A - Z 列表向左浮动，只需添加此规则:

#topbar > li > ul li {
  float:left;   
  margin:0 5px; // Or whatever margin you want
}

http://jsfiddle.net/tcwsb/3/

在你的 CSS 代码末尾有一个额外的右大括号，如果你试图在最后一个大括号下面添加任何规则，这可能会导致问题