Html 显示行内，li项向左浮动

我想有一个悬停框在我的名单上，这样他们可以显示字母并排。 这是一个例子，每当我把鼠标光标放在“title”这个词上时，我都会有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>

,,,

要使A-Z列表向左浮动，只需添加以下规则：

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

---

CSS代码末尾有一个额外的右括号，如果您试图在最后一个下添加任何规则，可能会导致问题。这就是您需要的CSS：

#topbar { list-style:none; width: 80%; }
#topbar > li { 
    display:inline-block; 
    *display:inline;
    position:relative;
}
#topbar > li > a { padding:1em 20px; }

#topbar li ul {
    display:none;
    position:absolute;
    top:2em;
    left:20px;
    padding:5px;
    background:white;
    border:1px solid black;
}

#topbar li ul li { 
    display:inline-block;
    *display:inline;
}

#topbar > li:hover ul { display:block }

---

这里是工作演示：

hi，什么是

margin:0 5px意思？它是
页边距顶部的缩写：0；页边距底部：0；左边距：5px；右边距：5px