Question

我试图在这里学习本教程： http://inobscuro.com/tutorials/image-rollover-menu-19/

然而，我只得到没有图像的子弹指向列表。

我已经验证了我的CSS文件被包含在内，因为我可以更改整个页面的背景颜色。

我已经确认我可以使用标记在我的主页上包含图片，网址如下：＆＃34; img / nav / nav_news.png＆＃34;这些是我用于菜单的相同网址。

我已经尝试将我的样式表的url（）部分中的url括在引号中，并且没有引号。

我也尝试在CSS文件中扩展菜单的宽度和高度，猜测宽度和高度对于我的图像来说太小了（140x50像素），但也没有运气。

为什么这可能不起作用的任何想法？我的index.html：

<!DOCTYPE html 
      PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">

<link rel="icon" 
      type="image/png"
      href="favicon.png">

<link rel="shortcut icon" 
      type="image/png"
      href="favicon.png">

<link rel="stylesheet" 
      type="text/css"
      href="all.css"> 

<title>Test</title>

</head>

<body>
<ul class="menu">
        <li class="news"><a href="#">News</a></li>
        <li class="merch"><a href="#">Merch</a></li>
        <li class="shows"><a href="#">Shows</a></li>
        <li class="contact"><a href="#">Contact</a></li>
</ul>
</body>

</html>

我的all.css：

.menu {
        margin: 0;
        padding: 0;
        width: 200px;
        list-style: none;
        background: #fff;
}

.menu li {
        padding: 0;
        margin: 0;
        height: 70px;
        list-style: none;
        background-repeat: no-repeat;
}

.menu li a, .menu li a:visited {
        display: block;
        text-decoration: none;
        text-indent: -9999px;
        height: 70px;
        background-repeat: no-repeat;
}

.news {background-image: url("img/nav/nav_news.png");}
.news a {background-image: url("img/nav/nav_news.png");}
.merch {background-image: url("img/nav/nav_merch.png");}
.merch a {background-image: url("img/nav/nav_merch.png");}
.shows {background-image: url("img/nav/nav_shows.png");}
.shows a {background-image: url("img/nav/nav_shows.png");}
.contact {background-image: url("img/nav/nav_contact.png");}
.contact a {background-image: url("img/nav/nav_contact.png");}

ul.menu li a:hover {background: none;}

非常感谢你！

Answer 1

从代码中删除此样式：text-indent：-9999px;并再次验证图像路径。

CSS中基于图像的菜单

1 个答案: