I have a custom dropdown box in jQuery slider as per below image link. 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 link. 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.
Check this link for image
Now you can see above image Per Unit Cost drop down list is hiding behind slider container.
Slider Jquery
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);
object.setNavActive(2);
}
</script>
Slider CSS
.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%;
}
.lof-main-wapper
{
margin-right: auto;
overflow: hidden;
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);
}
.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;
}
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[
^]