Hey there! I'm currently using the jquery.cycle.all.js plugin for my website.
I've encountered an issue where I want to position a menu div on top of an image slider. The menu is in the correct location, but unfortunately, it's hidden beneath the slider.
Does anyone have any tips or solutions on how I can move the menu to appear above the slider?
Below is the code snippet I'm working with. Any help or guidance would be greatly appreciated!
<div id= "MiddleContent">
<div class="Menu">
<ul>
<li style="background-color:Red;">item</li>
<li style="background-color:blue;">item</li>
<li style="background-color:green;">item</li>
<li style="background-color:yellow;">item</li>
<li style="background-color:orange;">item</li>
</ul>
</div>
<div class="slideshow">
<img src="images/Slider1.png" alt="" />
<img src="images/Slider2.png" alt="" />
<img src="images/Slider3.png" alt="" />
<img src="images/Slider4.png" alt="" />
<img src="images/Slider5.png" alt="" />
<img src="images/Slider6.png" alt="" />
</div>
</div>
Here's the corresponding CSS:
/************************************/
/* #MiddleContent */
/************************************/
div#MiddleContent
{
position: relative;
margin: 50px 50px 50px 50px;
}
div#MiddleContent .slideshow
{
overflow: hidden;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
div#MiddleContent .Menu
{
position: absolute;
left: 0px; right: 0; bottom: 0px; top: 0px;
min-height: 300px;
max-width : 250px;
background: white;
z-index: 1000px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}