dropdown hide behind mootools silder

Question

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!

Answer 1

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