Jump to content

Drop down menu problem


runawaykinms

Recommended Posts

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.