html - CSS - 是否可以拆分 元素？

Question

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

或者，我不确定是否需要三个 div。我想要的只是一般的 :hover 效果具有某种颜色。然后我想要在每个“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> 内的元素标记并使用普通图像替换技术(您不能使用 <a> 元素，因为它已经定义了背景)。

希望这对您有所帮助。