我正在使用 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。
提前感谢您的帮助。
布兰登