Css 将鼠标悬停在上方时，菜单将移动

我在Dreamweaver中创建了一个滚动图像菜单。一周中的几天是图像。鼠标悬停时显示的滚动图像也是如此。我的问题是当你将鼠标悬停在一周中的几天上时，鼠标悬停图像会将文本向下推

我已经模拟了两个屏幕抓图，分别在悬停之前和悬停期间显示菜单（）

我读了一些关于z索引的文章，并尝试使菜单的数字大于悬停，但这并没有起作用，也无助于使位置固定。最后，这是唯一的CSS我有样式的菜单-

==CSS==

 #nav {
text-align:center;
list-style: none;


}
#nav ul
{
list-style-type:none;

}
#nav li
{
display:inline;
text-decoration:none;

}

为了方便起见，我只展示了一个类别。

---

提前谢谢你

使用

javascript

对于您试图完成的任务来说是过分的，只需使用一个sprite图像，然后通过

CSS

HTML:

<ul>
    <li class="home"><a href="#">Home</a></li>
</ul>

试试这个

---

整版：

在包含

div

的页面上尝试使用

vertical align:top

。此外，您的JSFIDLE没有悬停效果。为什么要使用图像？我尝试过，但图像仍在移动。我希望一周中的每一天都保持不变你是什么意思？您希望其他非悬停图像在悬停图像时将其大小更改为更小？我希望一周中的天数保持不变，悬停时不移动。当你在一天中悬停时，悬停图像会将一天向下推。我想让这一天保持不变是的。。我已经模拟了一张图片来说明我的意思——所以当我停下来的时候，日子是固定的！那么，添加了一个img{vertical align:top；}吗？明亮的谢谢你对我有耐心

ul { float:left}
ul li { float:left; list-style:none; }
ul a { display:block; text-indent:-9999em; }

ul li.home { width:100px; height:50px; }
ul li.home a { background:url(http://placehold.it/100x100) no-repeat 0 0 }

ul li.home a:hover { background-position:0 -50px; }

#nav li a img{
    vertical-align:bottom;
}