我正在使用jQuery slideDown / slideUp函数创建一个菜单，用于在鼠标悬停时显示链接。菜单是包含菜单标题的图像，当鼠标悬停在图像上时，它会垂直增长，显示链接。菜单图像/链接包含在div中以帮助定位图像。
我能够让菜单图像垂直增长显示所有链接，但当我尝试悬停覆盖底部链接时，jQuery会过早地折叠图像。更奇怪的是，菜单在屏幕顶部正常工作，但当我将菜单图像放在背景图像上时，退出完全正常工作。
悬停区域似乎与图像没有垂直增长，而是保持折叠图像的原始高度。
以下是我的jQuery函数：
$( document ).ready
(
function()
{
$( '.down-list' ).width( $( '.dropdown-menu' ).width() );
$( '.dropdown-menu' ).hover
(
function()
{
$( '.menu-first', this ).addClass( 'slide-down' );
$( '.down-list', this ).slideDown( 50 );
},
function()
{
obj = this;
$( '.down-list', this ).slideUp
(
50,
function()
{
$( '.menu-first', obj ).removeClass( 'slide-down' );
}
);
}
);
}
);
这是HTML：
<body>
<div id="container">
<img name="background" src="images/background.jpg" width="1600" height="1238" border="0" alt="Legend of Kung Fu - Branson, MO" usemap="#navMap" />
<map name="navMap">
<area shape="rect" coords="387,9,717,95" href="http://www.kungfubranson.com" alt="Home" />
<area shape="rect" coords="833,0,1008,100" href="http://foursquare.com/venue/6109987" target="_blank" alt="Four Square" />
<area shape="rect" coords="1045,45,1080,79" href="http://twitter.com/KungFuBranson" target="_blank" alt="Twitter" />
<area shape="rect" coords="1087,45,1122,78" href="http://www.facebook.com/kungfubranson" target="_blank" alt="Facebook" />
<area shape="rect" coords="1131,45,1167,79" href="http://www.youtube.com/kungfubranson" target="_blank" alt="YouTube" />
<area shape="circle" coords="1273,56,37" href="https://tickets.kungfubranson.com" target="_blank" alt="Buy Tickets Now!" />
</map>
<div id="menuLinks">
<div class="dropHolder">
<div class="dropdown-menu">
<div class="menu-first">
<div class="menu-first2">
Show <br />
Info
</div>
</div>
<ul class="down-list" style="display:none;">
<li style="padding-top: 24px;">
<a href="story.php">Story</a>
</li>
<li>
<a href="news.php">News</a>
</li>
<li>
<a href="reviews.php">Reviews</a>
</li>
<li>
<a href="contact.php">Contact</a>
</li>
</ul>
<img src="images/lanternBottom.png" alt="" />
</div>
</div>
</div>
<div id="content">
</div>
</div>
</body>
这是相应的CSS：
/*-------------------------------*/
/* Contains every Division Layer */
/*-------------------------------*/
body
{
margin: 0px;
padding: 0px;
background-color: #FFF0E0;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-variant: normal;
font-weight: normal;
}
/*-------------------------------------------------------------------*/
/* Primary Division Layer and the ONLY one with a Relative Position */
/* permitting entire page to resize according to browser window size */
/* */
/* Used on Home Page and contains all subsequent Division Layers */
/*-------------------------------------------------------------------*/
#container
{
position: relative;
margin: 0 auto 0 auto;
width: 1600px;
height: 1238px;
}
/*---------------------------------*/
/* Contains Menu Image Label Links */
/*---------------------------------*/
#menuLinks
{
position: absolute;
top: 200px;
left: 491px;
width: 582px;
height: 200px;
}
.dropHolder
{
width: 90px;
float: left;
height: 1px;
margin-left: 2px;
line-height: 1.2em;
color: #000;
font-variant: normal;
font-size: 13.5px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-weight: bolder;
}
.dropHolder html, .dropHolder div, .dropHolder span, .dropHolder applet, .dropHolder object, .dropHolder iframe, .dropHolder blockquote, .dropHolder pre,
.dropHolder a, .dropHolder abbr, .dropHolder acronym, .dropHolder address, .dropHolder big, .dropHolder cite, .dropHolder code,
.dropHolder del, .dropHolder dfn, .dropHolder em, .dropHolder font, .dropHolder img, .dropHolder ins, .dropHolder kbd, .dropHolder q, .dropHolder s, .dropHolder samp,
.dropHolder small, .dropHolder strike, .dropHolder strong, .dropHolder sub, .dropHolder sup, .dropHolder tt, .dropHolder var,
.dropHolder dl, .dropHolder dt, .dropHolder dd, .dropHolder ol, .dropHolder ul, .dropHolder li
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
}
.dropHolder ol, .dropHolder ul
{
list-style: none;
}
.dropdown-menu
{
position: absolute;
width: 90px;
cursor: pointer;
z-index: 1000px;
}
.dropdown-menu a:link, .dropdown-menu a:visited
{
color: #000 !important;
display: block !important;
text-decoration: none !important;
margin: 0 !important;
width: 90px;
}
.dropdown-menu a:hover
{
color: #cb0202 !important;
text-decoration: none !important;
width: 90px;
}
.dropdown-menu .slide-down
{
background: url(../images/lanternTop.png) no-repeat;
width: 90px;
}
.menu-first
{
background: transparent url(../images/lanternTop.png) no-repeat;
width: 90px;
height: 38px;
text-align: center;
padding: 0px 0px 0px 0px;
vertical-align: bottom;
line-height: 14px;
}
.menu-first2
{
position: relative;
bottom: -23px;
z-index: 100;
}
.down-list
{
background: url(../images/lanternMiddle.png) repeat-y;
width: 90px;
margin-left: 0px;
z-index: 500;
font-size: 13px;
}
.down-list li
{
background: url(../images/lanternMiddle.png) repeat-y;
width: 90px;
height: 25px;
padding: 0px 0px 0px 0px;
text-align: center;
line-height: 24px;
vertical-align: bottom;
}
.down-list_OFF .lastLI_OFF
{
background: url(../images/lanternMiddle.png) repeat-y;
width: 88px;
height: 8px;
line-height: 12px;
vertical-align: bottom;
}
/*-----------------------*/
/* Contains Page Content */
/*-----------------------*/
#content
{
position: absolute;
top: 316px;
left: 413px;
width: 771px;
height: 825px;
text-align: justify;
overflow-x: hidden;
overflow-y: auto;
}
我正在使用jquery-1.7.2.min.js。
提前感谢您的帮助。
布兰登
答案 0 :(得分：0)
从此
替换 #menuLinks css#menuLinks {
float: left;
height: 200px;
margin-left: 491px;
margin-top: 200px;
width: 582px;
}