mootools如下图所示，我在滑块中有一个自定义下拉框。此滑块包含三个 div，它们会自动垂直旋转。滑块和自定义下拉菜单的 javascript 和 css 描述如下。我的问题是，当我将下拉菜单放入隐藏在滑块 div 后面的滑块 div 中时，如下图所示。根据要求，我不能改变下拉位置，也不能增加滑块高度，那么如何在滑块上显示下拉列表项。任何建议将不胜感激。
现在您可以看到上图每单位成本下拉列表隐藏在滑块容器后面。
滑块mootools
http://mootools.net/download/get/mootools-1.2.4.js
http://cnetjavascript.googlecode.com/files/mootools.svn.js
<script type="text/javascript">
var _lofmain = $('lofslidecontent45');
var _lofscmain = _lofmain.getElement('.lof-main-wapper');
var _lofnavigator = _lofmain.getElement('.lof-navigator-outer .lof-navigator');
var object = new LofFlashContent(_lofscmain,
_lofnavigator,
_lofmain.getElement('.lof-navigator-outer'),
{ fxObject: { transition: Fx.Transitions.Quad.easeInOut, duration: 800 },
interval: 3000,
direction: 'vrdown'
});
object.start(true, _lofmain.getElement('.preload'));
var isCustom = "@(ViewBag.IsCustom)";
if (isCustom == "True") {
object.callMyEvent(2, true); // call my custom event
object.setNavActive(2);
}
滑块 CSS
/* CSS Document */
.lof-slidecontent
{
margin-left: 0px;
position: relative;
overflow: hidden;
width: 1200px;
height: 486px;
}
.lof-slidecontent .preload
{
height: 100%;
width: 100%;
background: #FFF;
position: absolute;
top: 0;
left: 0;
z-index: 10;
color: #FFF;
text-align: center;
}
.lof-slidecontent .preload div
{
height: 100%;
width: 100%; /*background: transparent url(../Images/MyImages/Icons/load-indicator.gif) no-repeat scroll 50% 50%;*/
}
/* main flash */
.lof-main-wapper
{
margin-right: auto;
overflow: hidden; /*background: transparent url(../Images/MyImages/Icons/load-indicator.gif) no-repeat scroll 50% 50%;*/
padding: 0px;
height: 488px;
width: 1014px;
position: relative;
overflow: hidden;
}
.lof-main-wapper .lof-main-item
{
padding: 0px;
margin: 0px;
height: 488px;
width: 100%;
position: absolute;
}
.lof-main-wapper .lof-main-item img
{
padding: 0px;
width: 100%;
}
.lof-main-item-desc
{
z-index: 100px;
position: absolute;
top: 150px;
left: 50px;
width: 400px;
background: url(../images/transparent_bg.png); /* filter:0.7(opacity:60) */
}
.lof-main-item-desc p
{
color: #FFF;
margin: 0 8px;
padding: 8px 0;
}
.lof-main-item-desc h3 a
{
color: #FFF;
margin: 0;
font-size: 140%;
padding: 20px 8px 2px;
font-family: "Trebuchet MS" ,Trebuchet,Arial,Verdana,sans-serif;
}
/* item navigator */
ul.lof-navigator
{
top: 0px;
padding: 0px;
margin: 0px;
position: absolute;
width: 100%;
overflow: hidden;
}
ul.lof-navigator li
{
cursor: hand;
cursor: pointer;
list-style: none;
width: 100%;
padding: 0px;
margin: 0px;
}
.lof-navigator-outer
{
position: absolute;
right: 0;
top: 0px;
z-index: 100;
height: 488px;
width: 204px;
padding: 0px;
margin: 0px;
float: left;
}
.lof-navigator li.active
{
background: url(../../Images/MyImages/Icons/arrow-bg2.png) no-repeat;
background-color: #d21c1c;
color: #FFF;
}
.lof-navigator li:hover
{
}
.lof-navigator li div
{
text-align: center;
height: 162px;
position: relative;
margin-left: 0px;
padding-left: 0px;
background-color: #FFFFFF;
}
.lof-navigator li.active div
{
}
.lof-next
{
position: absolute;
top: 0;
height: 30px;
background: #F9F9F9;
display: block;
width: 100%;
}
.lof-previous
{
position: absolute;
bottom: 0;
height: 30px;
background: #F9F9F9;
display: block;
width: 100%;
}
.lof-navigator-MycontentHeader
{
font-family: Caecilia LT Std;
font-size: 26px;
color: #d21c1c;
}
li.active .lof-navigator-MycontentHeader
{
color: #FFF;
}
.lof-navigator-MycontentFooter
{
font-family: TradeGothic, Arial;
font-style: oblique;
font-size: 13px;
color: Black;
}
li.active .lof-navigator-MycontentFooter
{
color: #FFF;
}
落下
提前致谢！