dropdown hide behind mootools silder

问题

I have a custom dropdown box in mootools slider as per below image. This slider contains three div, that auto rotate in vertically one by one. Slider’s and custom dropdown’s javascript and css described below. My problem is that, when I put dropdown into slider div that hide behind slider div as per below image. According requirement, I can’t changed dropdown position and not increase slider height, then how to display dropdown list items on top off slider. Any suggestion will be appreciated.

Now you can see above image Per Unit Cost drop down list is hiding behind slider container.

Slider mootools

http://code.google.com/p/locjoomla/source/browse/trunk/mootool/lofslidernews/js/lofslidernews.mt11.js

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

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

Drop down

http://www.mindstick.com/Articles/f649279c-dc3a-42cb-ab10-e24ae9a1bb90/?Stylish%20Dropdown%20in%20HTML

Thanks in advance!

回答1:

Can you put the slider in an iframe? There might be a more sophisticated remedy, but that always works.

回答2:

If some content can't be shown in HTML it's usually due to overflow:hidden css attribute set on one of it's parents.

It's seems that is what your problem is - try to remove the overflow hidden of the parent element that contains the dropdown element.

If you need that overflow:hidden then there are other ways to create that effect so it really help if you publish your full code using http://jsfiddle.net/ or something else...

来源：https://stackoverflow.com/questions/15447146/dropdown-hide-behind-mootools-silder