2

我有一个基于嵌套无序列表的菜单。所有样式和显示都是通过 css 完成的。

菜单被包裹在一个固定宽度的 div 中。对于某些顶级项目，子菜单的一行包含太多项目，这些项目会换行到第二行甚至第三行，从而扩大了 div 高度。这工作正常。

我想要做的是在子菜单项的行之间添加一条水平线/分隔线/边框，无论行数如何，并且宽度等于下面或上面的行（最好是下面）。显然，如果只有一行项目，则不会出现任何行。

我尝试在整个顶部添加背景<ul id="submenu">，然后使用 将其从第一行中删除ul#submenu:first-line{}，然后意识到这无法完成（headslap）。

然后我更改了菜单的结构以使用<p>嵌套在 div 中的元素，再次使用div#submenu:first-line{}，但测试这给了我奇怪的结果。例如，背景颜色将显示在第一行，但只有子菜单项高度的一半；背景图像出现在子菜单项的中间。有时在我单击当前顶级菜单项之前什么都没有显示。

<p>我什至尝试用包含一系列元素的单个元素替换列表结构<a>，并得到了相同的结果。

证据表明我没有:first-line正确使用伪元素，但在网上阅读表明这应该可行。

关于我做错了什么以及如何获得这些水平线的任何建议，最好是使用 CSS 而没有 JS？

这是我的代码：

#subMenuContainer {
    width:100%;
    margin-top:20px;
}
#subMenu {
    width:600px;
    margin:0 auto;
    text-align:center;
    background:#ddd;
}
#sub {
    border-top:2px solid green;
    padding:0px;
    line-height:30px;
}
#sub::first-line {
    border-top:2px solid red; /* doesn't work */
    background-color:pink; /* works */
    color:yellow; /* doesn't work */
}
#sub p {
    display:inline-block;
    padding:0px;
}
#sub p a {
    padding:0px 0px;
    line-height:1em;
}​
<div id="subMenuContainer">
    <div id="subMenu">
        <div id="sub" >
            <p><a href="#">MenuItem1</a></p>
            <p><a href="#">MenuItem2</a></p>
            <p><a href="#">MenuItem3</a></p>
            <p><a href="#">MenuItem4</a></p>
            <p><a href="#">MenuItem5</a></p>
            <p><a href="#">MenuItem6</a></p>
            <p><a href="#">MenuItem7</a></p>
            <p><a href="#">MenuItem8</a></p>
            <p><a href="#">MenuItem9</a></p>
            <p><a href="#">MenuItem10</a></p>
        </div>
    </div>
</div>

在 jsfiddle 中也是如此。

4

1 回答 1

0

我认为您应该使用 :first-child 而不是 :first-line 伪类。

  • :first-line 指的是文本元素的第一行
  • :first-child 是指父元素的第一个子元素。例如，你的 ul 中的第一个 li。

有关详细信息，请参阅http://www.w3schools.com/css/css_pseudo_classes.asp 。

如果这不能解决您的问题，您可以发布您的标记吗？

五。

于 2012-11-07T13:16:44.167 回答