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

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>标记内添加元素并使用常规图像替换技术(不能使用<a>已定义背景的元素).

希望这可以帮助.