菜单在悬停时移动

时间:2013-12-02 14:06:08

标签: css drop-down-menu dreamweaver

我在Dreamweaver中创建了一个变换图像菜单。一周的日子是图像。悬停时出现的翻转图像也是如此。我的问题是当你将鼠标悬停在一周中的几天时,悬停图像会将文本按下来。

我一起嘲笑两个屏幕抓取显示菜单在悬停之前和期间(http://static.tumblr.com/2wdsnoc/FbPmx6mez/hover-example.png

我读到了z-indexes并试图使菜单的数量大于悬停,但是没有用,也没有帮助确定位置。最后,这是我设置菜单的唯一CSS -

== CSS ==

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


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

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

}

Here is the JSfiddle with the full javascript, html and css我只是轻松地展示了一个类别。 提前谢谢!!

2 个答案:

答案 0 :(得分:0)

使用Javacript对于您要完成的工作来说是过度的,只需使用精灵图片,然后通过CSS管理其余部分

<强> JSFiddle Demo

<强> HTML:

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

<强> CSS

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

答案 1 :(得分:0)

试试这个http://jsfiddle.net/r2FF7/18/

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

整页:http://jsfiddle.net/r2FF7/18/show/