css - 复杂的 css 菜单

Question

我有一个菜单:

<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>

我当前的 CSS 如下:

.headerMenu{
    width: 100%;
}

.headerMenu ul{
    margin: 0; 
    padding: 0;
    float: left;
}

.headerMenu ul li{
    display: inline;
}

.headerMenu ul li a{
    float: left;
    color: white;
    padding-top:25px;
    padding-left:50px;
    font-size:24pt;
}

.headerMenu ul li a:visited{
    color: white;
}

.headerMenu ul li a:hover, .menu ul li .current{
    color: #fff;
    background: url(../../Content/Images/menu-selector.png) repeat-x; /* 25x10 arrow/*
}

现在是问题:

1. 如何让 span 标签中的内容位于正文下方。
2. 当我将鼠标悬停在 anchor 上时，如何添加屏幕截图中显示的悬停图像

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

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

Answer 1

1) 如何让 span 标签中的内容位于正文下方。

您需要在 span 上使用 display: block 以使其显示在新行上:

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

2) 当我将鼠标悬停在 anchor 上时，如何添加屏幕截图中显示的悬停图像

尝试将箭头居中到顶部。这可能有效:

.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... */
}