复杂css菜单

我有菜单：

<div class="headerMenu">
    <ul>
        <li><a href="#">Home <span>Home Page<span></a></li>
        <li><a href="#">About <span>About My Website<span></a></li>
        <li><a href="#">Contact <span>Get in touch<span></a></a></li>
    </ul>
</div>

现在回答问题：

如何使span标记中的内容位于主文本下方

当我将鼠标悬停在

锚点上时，如何添加悬停图像，如屏幕截图所示

我在Photoshop中创建的模型如下所示：

我知道这可以通过使用图像轻松实现，但我的解决方案要求动态创建菜单。

1）如何使span标记中的内容位于主文本下方

您需要在

span

上使用

display:block

，使其显示在新行上：

.headerMenu ul li a span {
  display: block;
}

2） 当我将鼠标悬停在锚上时，如何添加悬停图像，如屏幕截图所示

尝试将箭头居中至顶部。这可能会奏效：

.headerMenu ul li a:hover, .menu ul li .current {
  color: #fff;
  background: url(../../Content/Images/menu-selector.png) no-repeat center top;
  display:block;
  /* also make sure that you use display block with correct height
   so that you can positionate the arrow on the correct place... */
}

---

为问题1添加以下代码：

.headerMenu ul li a span {
    display: block;
}

这将

设置为显示为块级元素，因此默认情况下占据整个父容器宽度

对于问题2，有多种方法可以做到这一点。但是，我的建议是将数组添加到

并使用

：hover

伪类注意：这只在IE中适用于7+

.menu ul li:hover{
    background: url(../../Content/Images/menu-selector.png) repeat-x;
}

---

查看它的实际操作-（我更改了颜色以帮助显示）

无论如何，我无法用正确的CSS解决它，因为我没有背景图像。如果他想学习，最好是他自己去解决，而不是别人给他完整的解决方案。这就像一个符咒，我只需要移动li:hover类上的

display:block

样式。看看Jason的答案，其中包括一个小提琴演示。@Jared是的，确实如此。但是，正如您在fiddle的结果窗格中看到的那样，该解决方案并不完整。或者我错过了什么？我确实相信，在您真正展示工作演示的情况下，小提琴是很好的。但在我的例子中，这段代码在演示中不起作用。但这可能会给他一些想法。。。

.menu ul li:hover{
    background: url(../../Content/Images/menu-selector.png) repeat-x;
}