Drop down menu problem

runawaykinms · May 16, 2010

Hello,

I am having a problem with my drop down menu. The layout of my page has a drop down menu and directly below it there is a table with a rotating ad. The rotating ad is using the jquery cycle plugin to change between different ads. Anyway, the problem I am having specifically is that, if the table cell containing the ad has more than one image (ad) inside of it the drop down menu does not drop on top of this image but behind it. For a slight moment when the images are in between cycle the drop down menu box is visible on top of the ad, but then disappears as soon as the add is displayed. Is there some way I can make the drop down menu be visible on top of anything no matter what it is?

In case it is needed, I included the code and the CSS code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styles1.css"/>
<script type="text/javascript" src="jquery-1.4.2.min.js"            charset="utf-8"></script>
<script src="jquery.hoverIntent.minified.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="jquery.cycle.all.min.js"        charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
      
      function addMega(){
        $(this).addClass("hovering");
        }

      function removeMega(){
        $(this).removeClass("hovering");
        }

    var megaConfig = {
         interval: 200,
         sensitivity: 3,
         over: addMega,
         timeout: 200,
         out: removeMega
    };

    $("li.mega").hoverIntent(megaConfig)

      
    });

$(document).ready(function() {
    $('#slideshow').cycle({
	fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</style>
</head>
<body>
<div id="outercontainer">
<div id="container">
<!--Start of Navigation Bar-->
  <div id="header">
    <div id="logo"><img alt="" name="Logo" width="200" height="75" id="Logo"/></div>
      <ul id="menu">
        <li>
          <h2>
            <a href="#">Home</a>
          </h2>
          <div>
            Latest news, special deals, and more...
          </div>
        </li>
        <li class="mega">
          <h2>
            <a href="#">Bridal Veils</a>
          </h2>
          <div>
            <h3>
              Shoulder Length Veils
            </h3>
            <p>
              <a href="#">Shirts</a>, <a href="#">T-shirts</a>, <a href="#">Accessories</a>, <a href="#">More...</a>
            </p>
            <h3>
              Elbow Length Veils
            </h3>
            <p>
              <a href="#">Sporting goods</a>, <a href="#">Gadgets</a>, <a href="#">More...</a>
            </p>
            <h3>
              Fingertip Length Veils
            </h3>
            <p>
              40% off all photo accessories this weekend only. <a href="#">Don't miss out!</a>
            <h3>
              Knee Length Veils
              <br/>
              Cathedral Length Veils
            </h3>
          </div>
        </li>
        <li class="mega">
          <h2>
            <a href="#">Bridal Tiaras</a>
          </h2>
          <div>
            <h3>
              Ladieswear
            </h3>
            <p>
              <a href="#">Tops</a>, <a href="#">Pants</a>, <a href="#">Skirts</a>, <a href="#">T-shirts</a>, <a href="#">More...</a>
            </p>
            <h3>
              Gifts
            </h3>
            <p>
              <a href="#">Sporting goods</a>, <a href="#">Gadgets</a>, <a href="#">More...</a>
            </p>
            <h3>
              Shop Now for Mother's Day!
            </h3>
            <p>
              Earlybird Mother's Day specials. <a href="#">Shop early, save on shipping!</a>
            </p><a href="#" class="more">More stuff for her...</a>
          </div>
        </li>
        <li class="mega">
          <a href="#">Bridal Jewlery</a>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </div>
        </li>
        <li class="mega">
          <a href="#">Bridal Accessories</a>
          <div>
            <h3>
              Wedding Ceremony
            </h3>
            <p>
            <a href="#">Unity Candles</a><br/>
            <a href="#">Memorial Candles</a><br/>
            <a href="#">Ring Pillows</a><br/>
            <a href="#">Flower Girl Baskets</a><br/>
            <a href="#">Guest Books</a><br/>
            <a href="#">Wedding Collections</a><br/>
            </p>
            <h3>
              Wedding Reception
            </h3>
            <p>
            <a href="#">Champagne Flutes</a><br/>
            <a href="#">Cake Servers</a><br/>
            <a href="#">Champagne Flutes & Cake Server Sets</a><br/>
            <a href="#">Cake Toppers</a><br/>
            <a href="#">Gift Card Holders</a><br/>
            </p>
          </div>
        </li>
      </ul>
    </div>
  <div id="maincontent">
    <table width="100%" border="0" cellspacing="0" cellpadding="3">
      <tr>
        <td width="70%" rowspan="3">
        <div id="slideshow">
            <img src="5300VL[1].jpg" width="100%" height="450"/>
            <img src="acoustic-bricks.jpg" width="100%" height="450"/>
        </div>
        </td>
        <td width="30%"><img src="Graphics/Bridal Portrait 1.jpg" width="100%" height="148" /></td>
      </tr>
      <tr>
        <td><img src="Graphics/Bridal Portrait 2.jpg" width="100%" height="148" /></td>
      </tr>
      <tr>
        <td><img src="Bridal Portrait 1.jpg" width="100%" height="148" /></td>
      </tr>
    </table>
  </div>
  <div id="footer">
    <p> </p>
    <p> </p>
  </div>
</div>
</div>
</body>
</html>

CSS Code:

/*Containers*/
body {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Verdana", sans-serif;
font-size: 11px;
background: #fff;
color: #333;
}

td { 
vertical-align: top;
}

div#outercontainer {
background-color:#000;
margin: 0;
padding: 0;
border: 0;
}

div#container {
margin-left: 10%;
margin-right: 10%;
}

div#slideshow {
display: block;
}

h1, h2, h3, h4, h5, h6, p, ul, li {
font-size: 1em;
margin: 0;
padding: 0;
}

/*Mega drop down menu*/
ul#menu {
background: #9c3;
color: #fff;
margin: 0;
padding: 0.3em 0em;
}


ul#menu li {
display: inline;
margin: 0.1em 1em;
position: relative;
}

ul#menu h2, ul#menu h3 {
font-size: 100%;
font-weight: normal;
display: inline;
}


ul#menu li a {
color: #fff;
text-decoration: none;
padding: 0 0.4em;
}

ul#menu li a:hover {
text-decoration: underline;
}

ul#menu li.mega a {
background: transparent url(file:///C|/Documents%20and%20Settings/Matt/Local%20Settings/Temporary%20Internet%20Files/Content.IE5/JCKJQWB0/arrow.gif) center right no-repeat;
padding: 0 1.2em;
}

ul#menu li.mega a:hover {
text-decoration: underline;
}

ul#menu div {
display: none;
}

ul#menu li.mega div {
border: 1px solid #dda;
width: 18em;
position: absolute;
top: 1.6em;
left: 0em;
padding: 1.3em;
background: #9C3;
color: #930;
}

ul#menu li.hovering div {
display: block;
}

ul#menu li.mega div a {
color: #300;
padding: 0;
background-image: none;
text-decoration: underline;
}

ul#menu li div a.more {
color: #390;
font-weight: bold;
}


ul#menu div h3 {
color: #000;
font-weight: bold;
font-size: 1.1em;
}
ul#menu div p {
margin: 0 0 0.8em 0;
padding: 0;
}
/*Main Content*/
/*Footer*/

Thanks for the help

Sign In

Drop down menu problem

Recommended Posts

runawaykinms

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information