Question

我只是想知道，是否可以拆分'li'元素？我想尝试创建一个菜单，其中：悬停效果由三个div组成。

或者，我不确定我是否需要三个div。我想要的只是一般：悬停效果有一定的颜色。然后我想要一个像每个'li'中心的箭头形状的小图像。从而创建一个悬停效果，看起来像一个向下的小箭头。我觉得这里有点过于先进吗？

感谢任何帮助！

Answer 1

你不需要任何额外的div或类似的东西，一个带有一个透明PNG图像的简单结构就可以了。尝试这样的事情：

<ul id="navi">
    <li><a href="#" id="navi-hjem">Hjem</a></li>
    <li><a href="#" id="navi-ingredienser">Ingredienser</a></li>
    <li><a href="#" id="navi-oppskrifter">Oppskrifter</a></li>
    <li><a href="#" id="navi-kalender">Kalender</a></li>
    <li><a href="#" id="navi-kontakt">Kontakt</a></li>
</ul>

然后，使用与此类似的图像：

alt text http://www.ulmanen.fi/stuff/kennybones/menu.png

这样的CSS：

#header {
    height: 60px;
    background: #aaa;
}

#header ul#navi {
    margin-top: 19px;
    float: right;
    list-style: none;
}

#header ul#navi li {
    float: left;
}

#header ul#navi li a {
    display: block;
    height: 52px;
    padding: 0 20px;
    font: 16px Arial;
    line-height: 40px;
    color: #fff;
    text-decoration: none;
}

#header ul#navi li a:hover {
    background: url(menu.png) center bottom no-repeat;
}

你应该得到类似于我在这里的结果：

http://www.ulmanen.fi/stuff/kennybones/

如果您想将图片用作链接中的文字，您只需在<span>标记内添加<a>元素并使用常规图片替换技术（您无法使用{{1已经定义了背景的元素。）

希望这有帮助。

Answer 2

您是否考虑过这样的事情：

ul:hover{smthing}

ul:hover li{something}

ul:hover li a {blah}

Answer 3

我不确定你想要什么，但当我听到<li>，:hover和CSS菜单时，我想起了Eric Meyer的Complex spiral演示/教程。

在那里，您可能会找到帮助您解决问题的提示。

Answer 4

简短的回答是：是的。 LI是一个'flow'元素，这意味着您可以在其中合法地使用块级容器，例如：

<li><div class="a1"><div class="a2"><div class="a3"><a href="#">Link</a></div></div></div></li>

然后将它们定位为：

li div.a1{}

你可能会遇到旧版浏览器的问题而不是纪念li：hover，但是有很多方法可以解决这个问题。

CSS - 是否可以拆分<li>元素？</li>

4 个答案: