css - 使用文本缩进的图像导航

Question

我正在尝试为我的网站创建一个简单的图像导航，使用 CSS 来声明background-image列表项 (li) 的属性。问题是，当我text-indent将图像放在屏幕外时，链接不再存在（我想也是在屏幕外）。任何帮助将不胜感激。这是我的 XHTML：

<div id="nav">
  <ul>
    <li class="current about">
      <a href="#about" title="about">about</a>
    </li>
    <li class="contact">
      <a href="#contact" title="contact">contact</a>
    </li>
    <li class="networks">
      <a href="#networks" title="networks">networks</a>
    </li>
  </ul>
</div>

这是我的CSS：

#nav li {
   display: block;
   float:left;
   background-image: url("images/nav-normal.png");
   height:47px;
   text-indent: -9999px;
}

我还为各个列表项设置了背景位置，因为我使用的是图像精灵。提前致谢！

Answer 1

将该样式应用于#nav li a. 否则li，包括链接在内的所有内容都会移出屏幕。