Плагин jQuery для слайдшоу в фоновом режиме и проблемы с рендерингом градиента

Question

Я пишу домашнюю страницу для сайта, где я хочу, чтобы слайд-шоу изображений в фоновом режиме автоматически прокручивалось, когда пользователь перемещается по странице.Я успешно реализовал плагин jQuery, но при наведении курсора на панель навигации за слайд-шоу появляется выпадающее меню.Как сделать слайд-шоу на заднем плане, а поверх него появиться выпадающее меню?Кроме того, любые предложения по улучшению раскрывающихся списков должны учитываться как текущие, когда вы наводите курсор мыши над самим скрытым списком, а не только при наведении курсора на ссылку (что я и хочу).Вот HTML:

            <ul class="main-list">
            <li><a href="#">About</a>
                <ul>
                    <li><a href="#">Laboratory</a></li>
                    <li><a href="#">Evaluations</a></li>
                    <li><a href="#">Research</a></li>
                </ul>
            </li>
            <li><a href="#">Staff</a>
                <ul>
                    <li><a href="#">Academic Staff</a></li>
                    <li><a href="#">Graduates</a></li>
                    <li><a href="#">Yearbooks</a></li>
                </ul>
            </li>
            <li><a href="#">Announcements</a>
                <ul>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Announcements</a></li>
                </ul>
            </li>
            <li><a href="#">Events</a>
                <ul>
                    <li><a href="#">Visits</a></li>
                    <li><a href="#">Lectures</a></li>
                    <li><a href="#">Contests</a></li>
                    <li><a href="#">Chemistry Events</a></li>
                    <li><a href="#">Fire Department</a></li>
                </ul>
            </li>
            <li><a href="#">Apps</a>
                <ul>
                    <li><a href="#">Ptyx</a></li>
                </ul>
            <li><a href="#">Courses</a>
                <ul>
                    <li><a href="#">MSc.</a></li>
                    <li><a href="#">Undergraduates</a></li>
                </ul>
            <li><a href="#">Links</a>
                <ul>
                    <li><a href="#">Contact Information</a></li>
                    <li><a href="#">Open Day Visits</a></li>
                </ul>
            <li><a href="#">Publications</a>
                <ul>
                    <li><a href="#">Student Guides</a></li>
                    <li><a href="#">FEK</a></li>
                </ul>
            </li>
        </ul>
    </nav>
    <div class="show">
        <div id="slider">
            <a href="#" class="control_next">></a>
            <a href="#" class="control_prev"><</a>
            <ul class="slide">
                <li><img src="img/og1.jpg" width="600" height="600"></li>
                <li style="background: #333;"><img src="img/κατάλογος.png" width="600" height="600"></li>
                <li><img src="img/UoA_Logo.png" width="600" height="600"></li>
                <li style="background: #333;"><img src="imgtest.png" width="600" height="600"></li>
            </ul>
        </div>
    </div>
    <span class="pad">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    </span>
    <script>
    $('#checkbox').change(function(){
   setInterval(function () {
       moveRight();
   }, 3000);
 });
     </script>

CSS:

    a{
    text-decoration: none;
    color: #EAEAEA;
}
#header {
    overflow:hidden;
    width: device-width;
    height: 100px;
    border: 200px 241px 200px 200px;
    font-size: 40;
    font-family: Bookman Old Style;
    padding-bottom: 95px;
    margin-bottom: 0px;
    background: #7195c5e;
    background: -moz-linear-gradient(top,rgba(73,155,234,1) 35%,
    rgba(73,155,234,1) 65%,rgba(32,124,229,1) 97%,
    rgba(0,75,155,1) 100%);

}

#logo{
    float:left;
    padding-bottom:100px;
    margin-top: -75px;
    margin-left: 250px;
    margin-right: -270px;
}
#main-title{
    margin-left: -125px;

}
.header-box {
    overflow: hidden;
    text-align: center;
    padding-top:90px;
    font-size: xx-large;
    color: white;
    margin-left: -50px;
}
.pad{
    padding-top: 100px;
    padding-bottom: 100px;
}
nav {
    position: relative;
    width:100%;
    height: 45px;
    background: #4571EA; /* Old browsers */
    background: -moz-linear-gradient(top,  #4571EA 0%, #499bea 95%, #0e0e0e 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, top to bottom, color-stop(0%,#4571EA), color-stop(95%,#499bea), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #4571EA 0%,#499bea 95%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #4571EA 0%,#499bea 95%,#0e0e0e 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #4571EA 0%,#499bea 95%,#0e0e0e 100%); /* IE10+ */
    background: linear-gradient(bottom,  #4571EA 0%,#499bea 95%,#0e0e0e 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4571EA', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
    padding-top: 5px;
    padding-bottom: 5px;
}

nav ul {
    margin:0px;
    border:0px;
    list-style-type: none;
    float: left;
}
nav ul li{
    float: left;
    list-style: none;
    position: relative;
    padding: 10px 60px 10px 60px;
}
nav ul li ul a{
    margin-left: -95px;
    padding-left: 0px;
}
nav ul li a{
    font-size: 20px;
}

nav ul li ul{
    opacity: 0;
    position: absolute;
    margin-top: 5px;
    width: 160px;
    background-color: #4F9BED;
    border-radius:0px 0px 10px 10px;
    background: ##4F9BED; /* Old browsers */
    background: -moz-linear-gradient(top,  ##4F9BED 0%, #499bea 95%, #0e0e0e 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,##4F9BED), color-stop(95%,#499bea), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  ##4F9BED 0%,#499bea 95%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #4F9BED 0%,#499bea 95%,#0e0e0e 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #4F9BED 0%,#499bea 95%,#0e0e0e 100%); /* IE10+ */
    background: linear-gradient(to bottom,  ##4F9BED 0%,#499bea 95%,#0e0e0e 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4571EA', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */

}
nav ul li ul li{
    display: block;
    width: 125px;
    line-height: 100px;
}

nav ul li:hover ul{
    -moz-transition: opacity 0.5s ease-out;
    -webkit-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
    opacity: 1;
}
.display{
    background-color: white;
    height:550px;
    padding-bottom: 135px;
    display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

И JQuery:

jQuery(document).ready(function ($) {

    setInterval(function () {
        moveRight();
    }, 2500);

    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;

    $('#slider').css({ width: slideWidth, height: slideHeight });

    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });

});