Question

我想在我的列表上有一个悬停框，以便它们可以并排显示字母。这个link中显示了一个例子，每当我将鼠标光标放在单词＆＃34; title＆＃34;上时，我就会有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代码末尾有一个额外的结束花括号，如果你试图在最后一个下面添加任何规则，可能会导致问题

Answer 2

这是您需要的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 }

这是工作演示：http://jsfiddle.net/rfn9S/

显示内嵌左侧的li项目

2 个答案: