Question

我尝试使用精灵图片和类将特定菜单项标记为有孩子。我已经让它工作了，但我不认为我可以垂直居中背景图像。也不确定这是将箭头（悬停时更改）悬挂到菜单侧面的最佳方法。我有点精神，因为它是我第一次与他们一起玩的机会，我想在所有基本方向上做箭头以便重复使用。

<nav class="nav">
    <div class="nav">
        <ul>
            <li><a href="index.html">HOME</a></li>
            <li><a href="justjoelabout.html">ABOUT</a></li>
            <li><a href='#' class="hasChildren"><span>WORK</span></a>
                <ul>
                    <li class="services1"><a href="justjoelprint.html">PRINT</a></li>
                    <li class="services1"><a href="justjoelbranding.html">BRANDING</a></li>
                    <li class="services1"><a href="justjoeleditorial.html">EDITORIAL</a></li>
                    <li class="services1"><a href="justjoelphotography.html">PHOTOGRAPHY</a></li>
                </ul>
            </li>
            <li><a href="justjoelblog.html">BLOG</a></li>
            <li><a href="justjoelinspired.html">INSPIRED</a></li>
            <li><a href="justjoelcontact.html">CONTACT</a></li>
        </ul>
    </div>
</nav>

相关CSS：

.hasChildren:after {
  content:" ";
  display: inline-block;
  margin-left: 5px;
  background-image: url("http://i.imgur.com/IRDY4zU.png");
  background-repeat: no-repeat;
  background-position-x:0;
  background-position-y:0;
  width: 8px;
  height: 4px;
}

.hasChildren:hover:after {
  background-image: url("http://i.imgur.com/IRDY4zU.png");
  background-position-x:0;
  background-position-y:-4px;
}

Fiddle here

Answer 1

尝试使用vertical-align

.hasChildren:after{
    vertical-align:middle;
}

Answer 2

首先，请替换

background-position-x:0;
background-position-y:0;

带

background-position :0 0;

因为它是魔鬼的孩子（MS / IE）。

此外，这可以设置为百分比（不仅是pixcels），所以我强烈建议测试：

background-position :0 50%;

菜单项中的垂直居中箭头箭头

2 个答案: