Home/ Questions/Q 603397
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T16:55:35+00:00

I’m trying to make this jquery drop down bar be on top at all

  • 0

I’m trying to make this jquery drop down bar be on top at all time. I’m running into trouble on a specific page that is using jquery innerfade here: http://ithacacigars.com/cigars.php
For some reason is slips behind the images.

<?php include('perch/runtime.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Davey Whitney
davey@daveywhitney.com
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" type="text/css" href="http://ithacacigars.com/style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://ithacacigars.com/navstyle.css" media="screen" />
<title>Ithaca Cigars</title>

<script type="text/javascript" src="http://ithacacigars.com/js/jquery.js"></script>
<script type="text/javascript" src="http://ithacacigars.com/js/jquery.innerfade.js"></script>
<script type="text/javascript">
       $(document).ready(
                function(){

                    $('.ciglog').innerfade({
                        speed: 1000,
                        timeout: 5000,
                        type: 'sequence',

                    });
            });
 </script>


<script type="text/javascript">
$(document).ready(function () {
    $("ul.menu_body li:even").addClass("alt");
    $('img.menu_head').click(function () {
    $('ul.menu_body').slideToggle('medium');
    });
    $('ul.menu_body li a').mouseover(function () {
    $(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
    });
    $('ul.menu_body li a').mouseout(function () {
    $(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
    });
});
</script>

<script language="javascript">
image1 = new Image();
image1.src = "http://ithacacigars.com/images/homeon.png";

image2 = new Image();
image2.src = "http://ithacacigars.com/images/newon.png";

image3 = new Image();
image3.src = "http://ithacacigars.com/images/contacton.png";

image4 = new Image();
image4.src = "http://ithacacigars.com/images/navigateon.png";
</script>

</head>

<body>
<div id="wrapper">

<div id="column">   
    <div id="header">
      <img src="http://ithacacigars.com/images/header.png" />
    </div>
    <div id="content">
        <div id="nav">
        <div class="container">

<a href="http://ithacacigars.com/" onmouseover="image1.src='http://ithacacigars.com/images/homeon.png';"
onmouseout="image1.src='http://ithacacigars.com/images/home.png';">
<img name="image1" src="http://ithacacigars.com/images/home.png"></a>

<a href="http://ithacacigars.com/whatsnew.php" onmouseover="image2.src='http://ithacacigars.com/images/newon.png';"
onmouseout="image2.src='http://ithacacigars.com/images/new.png';">
<img name="image2" src="http://ithacacigars.com/images/new.png"></a>

<a href="http://ithacacigars.com/contact.php" onmouseover="image3.src='http://ithacacigars.com/images/contacton.png';"
onmouseout="image3.src='http://ithacacigars.com/images/contact.png';">
<img name="image3" src="http://ithacacigars.com/images/contact.png"></a>

<img src="http://ithacacigars.com/images/navigate.png" width="184" height="32" class="menu_head" />
<ul class="menu_body">
<li><a href="http://ithacacigars.com/cigars.php">Cigars</a></li>
<li><a href="http://ithacacigars.com/pipe.php">Pipe Tobacco</a></li>
<li><a href="http://ithacacigars.com/roll.php">Roll Your Own</a></li>
<li><a href="http://ithacacigars.com/acessories.php">Acessories</a></li>
</ul>
    </div>

</div>
    <div id="client">
        <ul class="ciglog">
               <li><img src="http://ithacacigars.com/images/cigarbarone.png" /></li>
               <li><img src="http://ithacacigars.com/images/cigarbartwo.png" /></li>
               <li><img src="http://ithacacigars.com/images/cigarbarthree.png" /></li>
               <li><img src="http://ithacacigars.com/images/cigarbarfour.png" /></li>
        </ul>
        <p class="cigarlist">
        <?php perch_content('Cigars'); ?>
        </p>
    </div>
</div>
</div>  
</div>

<div id="footer">
</div>
</body>

</html>

here is the css for everything but the drop down:

html, body {
    background-color:#1C130B;
}

a {
    text-decoration:none;
}

#wrapper {
    margin:0 auto;
}

#column {
    margin:0 auto;
    width:790px;
}

#header {

}

#nav {
    margin:0 0 0 20px;
    width:770px;
    height:35px;
}

.newbutton {
    float:right;
    width:130px;
}

#content {
    background-image:url('http://ithacacigars.com/images/contentbox.png');
    background-repeat:no-repeat;
    width:770px;
    height:770px;
    margin:40px 0 0 0;

}

#client {
    width:700px;
    height:550px;
    margin:20px 0 0 30px;
    font-weight: bold;
}

#portfolio .innerfade li img {
    margin:0 0 0 120px;
    height:350px;
}

#talk img{
    margin:20px 25px 0 0;
}

p .cigarlist {
    width:350px;
    height:550px;
    font-weight:bold;
    float:left;
}


.ciglog {
    width:350px;
    height:350px;
    float:right;
    position:relative;
    display:block;
}

#footer {
    width:100%;
    height:200px;
    background-color:#AE401E;
}

Css for dropdown:

@charset "utf-8";
/* CSS Document */


ul, li{margin:0; padding:0; list-style:none;}

.container img {
    border:1px solid #998675;
}

.menu_head{border:1px solid #998675; margin:0 0 0 200px;}

.menu_body {position:absolute; margin:0 0 0 553px; display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;}
.menu_body li{background:#493e3b;}
.menu_body li.alt{background:#362f2d;}
.menu_body li a{color:#FFFFFF; text-decoration:none; padding:10px; display:block;}
.menu_body li a:hover{padding:15px 10px; font-weight:bold;}

Any help would be greatly appreciated!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Set the z-index of class menu_body to a value greater than 4.

    • 0