Spry submenus covered by another <div>

All,
  This might be a simple fix, but I can't see the forrest through the trees.
I have a dark purple banner <div>& a white container <div>.  On the very bottom of the banner is a horizontal Spry menu, with inital white lettering, which changes to dark purple w/ light purple on hover.  All works fine with respect to the main menus.
However, when I added the submenus,they were covered by the main <div>; which started just below the main menu dark purple.
When I adjusted the heigth of the banner by 300px, I could see the submenu, but then this covered up my content in the main (white) <div>.
Since everything is the size, font, color & position except for the submenus - how can this be remedied?
I will be glad to post html / css if necessary, but first I'd like some general tips and/or clues of what might be going on.

Thank you all in advance,

Russ
Russ CummingsIT ConsulantAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jason C. LevineNo oneCommented:
Hi Russ,

You may need to set z-indexes on the various divs so the menu divs have a higher z-index than the main div.
0
Russ CummingsIT ConsulantAuthor Commented:
jason,
  Guess I need your further help, as I'm not familiar with z-index.
Would you please give a detailed example as to how to use it & where to put them.

Thanks, Russ
0
Jason C. LevineNo oneCommented:
Russ,

Try this tutorial and respond with a more specific version of the question:

http://www.echoecho.com/csslayers.htm
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Russ CummingsIT ConsulantAuthor Commented:
jason,
  Thank you. Let me play with those concepts for a day or so, then if I have any further detailed questions I'll ask, otherwise I'll award the points & close it.
Russ
0
Jason C. LevineNo oneCommented:
No problem.  Z-index is not that tough to understand...higher values sit on lower values but actual implementation is sometimes tricky.  Your stuff sounds straightforward, though.  
0
Russ CummingsIT ConsulantAuthor Commented:
jason,
 I added z-index layers to the page with the banner that contains the Spry menu a z-index:2; and the main content (white) with a z-index:1; as I understand, the higher the index, the higher on the "visible stack".  This worked only if I added the heigth of the submenu to the banner. This has banner (dark purple) remain on the screen, if the user doesn't select a submenu option.  
So 2 questions: 1. Is my understanding of z-index correct?
                          2. Is there a cleaner way to code the whole submenu portion, so they disappear when not hovered over or clicked?
Please see attached code
<!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>xxx</title>
<link href="styles/container.css" rel="stylesheet" type="text/css" />
<script src="Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSelector.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSet.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryFadingPanels.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SprySliderPanels.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryFilmStrip.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryImageLoader.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryImageSlideShow.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryThumbnailFilmStripPlugin.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryTitleSliderPlugin.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryPanAndZoomPlugin.js" type="text/javascript"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="Spry-UI-1.7/css/ImageSlideShow/basicFS/basic_fs.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2141543: #ImageSlideShow */

#ImageSlideShow {
	width: 456px;
	margin: 24px 0px 0px 0px;
	border: solid 1px #ffffff;
	background-color: #FFFFFF;
	padding-top: 10px;
}

#ImageSlideShow .ISSName {
	top: -24px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 18px;
	text-transform: uppercase;
	color: #AAAAAA;
}

#ImageSlideShow .ISSSlideTitle {
	top: -18px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 12px;
	overflow: hidden;
	color: #AAAAAA;
	text-transform: none;
	right: 0;
}

#ImageSlideShow .ISSClip {
	height: 300px;
	margin: 0 10px 10px 10px;
	border: solid 1px #ffffff;
	background-color: #ffffff;
}

#ImageSlideShow .ISSControls {
	top: 11px;
	height: auto;
}

#ImageSlideShow .FilmStrip {
	height: 80px;
	background-color: #ffffff;
}

#ImageSlideShow .FilmStripPreviousButton, #ImageSlideShow .FilmStripNextButton {
	width: 25px;
	height: 80px;
}

#ImageSlideShow .FilmStripTrack {
	height: 80px;
}

#ImageSlideShow .FilmStripContainer {
	height: 80px;
}

#ImageSlideShow .FilmStripPanel {
	height: 80px;
	padding-left: 10px;
	margin-right: 0px;
}

#ImageSlideShow .FilmStripPanel .ISSSlideLink {
	margin-top: 10px;
	border: solid 1px #ffffff;
	background-color: #FFFFFF;
}

#ImageSlideShow .FilmStripPanel .ISSSlideLinkRight {
	border: solid 1px #ffffff;
	width: 56px;
	height: 47px;
	margin: 4px 4px 4px 4px;
}

#ImageSlideShow .FilmStripCurrentPanel .ISSSlideLink {
	background-color: #FFFFFF;
	border-color: #ff0000;
}

#ImageSlideShow .FilmStripCurrentPanel .ISSSlideLinkRight {
	border-color: #ffffff;
}
    
/* EndOAWidget_Instance_2141543 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
  <oa:widget wid="2141543" binding="#ImageSlideShow" />
</oa:widgets>
-->
</script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="sidebar">
  <blockquote>
    <p> Contact Us: </p>
    <p>  </p>
    <p> Ph:  </p>
    <p> Fax: </p>
    <p> <a href="mailto:xxx@xyz.com"> xxx@xyz.com</a></p>
    <p> <a href="www.xyz.com" title="xxx">www.xyz.com</a></p>
    <p>_______________________________ </p>
    <p> <img src="images/image001.png" width="250" height="128" alt="Avaya IP Solution" /></p>
    <p align="center"> <em>Avaya IP Office Solution</em></p>
    <em><strong>
      <p>Standard PBX Phone Systems</p>
      <p>VOIP Phone Systems</p>
      <p>SIP Phone Systems</p>
      <p>Hosted Phone System</p>
      <p>Rental Phone System</p>
      <p>E-Mail</p>
      <p>Web-Site Design</p>
      </strong></em> <img src="images/image002.jpg" alt="Snom VOIP" width="248" height="203" align="left" />
    <p align="center"><em> Snom VOIP Phone Solution </em></p>
    <p align="center"><em><strong> Your total Business 
      Communication<br />
      Provider </strong></em></p>
  </blockquote>
</div>
  <div id="banner">
        <div id="banner1"><br />
          <div align="center">xxx</div>
        </div>
        <img src="images/logo.jpg" alt="Logo" width="274" height="119" align="right" />   
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a href="index.html" title="">HOME</a></li>
        <li><a href="about.html">ABOUT US</a></li>
        <li><a href="products.html" title="Products/Services" class="MenuBarItemSubmenu">PRODUCTS/SERVICES</a>
          <ul>
            <li><a href="avaya.html" title="Avaya">Avaya PBX/VOIP Solution</a></li>
            <li><a href="snom.html" title="Snom">Snom PBX/VOIP Solution</a></li>
            <li><a href="pbxact.html" title="PBXact">PBXact SIP Solution</a></li>
            <li><a href="hosted.html" title="Hosted">Hosted Solution</a></li>
            <li><a href="rental.html" title="Rental">Rental Solution</a></li>
          </ul>
        </li>
        <li><a href="extended.html" title = "Extended Services" class="MenuBarItemSubmenu">EXTENDED SERVICES</a>
          <ul>
            <li><a href="website.html" title="Website">Website Development/Design</a></li>
            <li><a href="business.html" title="Business">Business Packages</a></li>
            <li><a href="liquid.html" title="Liquidation">Liquidation/Legacy Services</a></li>
          </ul>
        </li>
        <li><a href="support.html" title="Support" class="MenuBarItemSubmenu">SUPPORT</a>
          <ul>
            <li><a href="tech.html" title="Tech">Tech Services</a></li>
            <li><a href="rrp.html" title="RRP">R &amp; R Program</a></li>
            <li><a href="quote.html" title="Quote">Get a Quote</a></li>
          </ul>
        </li>
        <li><a href="contact.html" title="Contact Us">CONTACT US</a></li>
      </ul>
    </div>
    <div id="main">
      <p><h2>
      &nbsp;&nbsp;HOME
      </h2>
      <ul id="ImageSlideShow" title="">
        <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-1.jpg" title="index"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-1.jpg" alt="photos-1.jpg" /></a></li>
        <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-10.jpg" title="about"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-10.jpg" alt="photos-10.jpg" /></a></li>
        <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-11.jpg" title="Tree"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-11.jpg" alt="photos-11.jpg" /></a></li>
        <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-12.jpg" title="Canon"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-12.jpg" alt="photos-12.jpg" /></a></li>
        <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-13.jpg" title="Door"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-13.jpg" alt="photos-13.jpg" /></a></li>
        <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-14.jpg" title="Flowers at the Palace of Fine Arts"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-14.jpg" alt="photos-14.jpg" /></a></li>
        <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-15.jpg" title="Palace of Fine Arts"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-15.jpg" alt="photos-15.jpg" /></a></li>
        <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-2.jpg" title="Orchid Close Up"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-2.jpg" alt="photos-2.jpg" /></a></li>
        <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-3.jpg" title="Dirt Road"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-3.jpg" alt="photos-3.jpg" /></a></li>
        <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-4.jpg" title="Fence Post"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-4.jpg" alt="photos-4.jpg" /></a></li>
        <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-5.jpg" title="Portrait of a Horse"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-5.jpg" alt="photos-5.jpg" /></a></li>
        <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-6.jpg" title="Brown Horse"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-6.jpg" alt="photos-6.jpg" /></a></li>
        <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-7.jpg" title="Spotted Horse Head"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-7.jpg" alt="photos-7.jpg" /></a></li>
        <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-8.jpg" title="Spotted Horses"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-8.jpg" alt="photos-8.jpg" /></a></li>
        <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-9.jpg" title="Lone Horse"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-9.jpg" alt="photos-9.jpg" /></a></li>
      </ul>
      <script type="text/javascript">
// BeginOAWidget_Instance_2141543: #ImageSlideShow

var ImageSlideShow = new Spry.Widget.ImageSlideShow("#ImageSlideShow", {
	widgetID: "ImageSlideShow",
	widgetClass: "BasicSlideShowFS",
	injectionType: "replace",
	autoPlay: true,
	displayInterval: 4000,
	transitionDuration: 2000,
	componentOrder: ["name", "title", "view", "controls", "links"],
	sliceMap: { BasicSlideShowFS: "3slice", ISSSlideLink: "3slice" },
	plugIns: [ Spry.Widget.ImageSlideShow.ThumbnailFilmStripPlugin ],
	TFSP: { pageIncrement: 5, wraparound: true }
});
// EndOAWidget_Instance_2141543 was 8 rgc 12/12/11
      </script>
</p>
<p>
Picking the right phone system for your business can be a challenge. 
</p>
<p><img src="images/image012sm.jpg" width="268" height="86" alt="Avaya" />
  <img src="images/image015.gif" width="274" height="96" alt="Bogen" />
  <img src="images/image010.jpg" width="182" height="192" alt="snom" />
  <img src="images/image014.gif" width="146" height="181" alt="PBact" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
  <img src="images/image008.jpg" width="189" height="98" alt="Plantronics" /></p>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</div>
</div>
</body>
</html>

Open in new window

0
Jason C. LevineNo oneCommented:
1.Yes
2. Can I get a link to look at instead of raw code?  Easier when I can see it with moving parts.  
0
Russ CummingsIT ConsulantAuthor Commented:
jason,
  www.automatedanswers.com/telnet is how you get to the page. Is that what you mean, excuse me for being ignorant, but this is my 1st Dw project, never dealt with css, widgets either new to me.
Russ
0
IanThCommented:
2 you are using the cleanest way of doing it

css is not hard to understand in you code you have a css for the spry menu horizontal
and all you have in the css is the elements like

#ImageSlideShow {
      width: 456px;
      margin: 24px 0px 0px 0px;
      border: solid 1px #ffffff;
      background-color: #FFFFFF;
      padding-top: 10px;
}

so a css allows the #imageslideshow in multiple pages by linking the css file
0
Jason C. LevineNo oneCommented:
0
Russ CummingsIT ConsulantAuthor Commented:
jason et al;
  Sorry, a typo.
Should be http://www.automatedanswers.com/telnet1

Russ
0
Jason C. LevineNo oneCommented:
Okay, weirdness.

FF 8 and Chrome WhateverVersionTheyAreOn works fine with no z-index involved (I removed z-index:1000 from your code with Firebug) on ul.MenuBarActive.  What browsers are you seeing the issue with?

The rest of it is kind of a mess and hard to figure out :)

Let's try this.  Remove the Spry Menu Bar (maybe do this on a copy of the telnet1 page) and all of the associated CSS for it and embed a new one.  Then let me take a look at it.

0
Russ CummingsIT ConsulantAuthor Commented:
jason,
  I am using IE 8/9.  Hardly any of the code was written by hand. DreamWeaver 5.5 was how  all of this was developed. I will do as you suggest, that is remove all traces of the menu bar and start fresh.

Russ
0
Russ CummingsIT ConsulantAuthor Commented:
jason,
All old code relating to spry menu deleted - including css. Reinserted menu, made no adjustments except for positioning at bottom of banner <div>. Uploaded it. I can see where the sub menu is underneath the main <div>. How do I make the menu always on top, but minimize when not hovered over?

www.automatedanswers.com/telnet1

Thank you,

Russ
0
Russ CummingsIT ConsulantAuthor Commented:
All,
It appears to work correctly outside of Dw, at least w/ IE9. I'm going to adjust color / height / font style.
Seeing if I can debug where it went .

Russ
0
Russ CummingsIT ConsulantAuthor Commented:
OK, all is great. Found out my problem was I had the menu nested inside the banner div which was inside the container div. Once I pulled it out, poof, submenus worked fine without problem.
How do I award points, as I found the solution myself, but I needed the direction of jason1178 to reinstall the menu?
Thanks,

Russ
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
IanThCommented:
as its your question go to jasons comment and you will see a box for giving jason the points inside that comment
0
Jason C. LevineNo oneCommented:
To accept your own post and give me an assist you would click Accept and Award Points in your own post.  You will the get an option to give me a share of the points.

I'm fine with or without points, though.  I have plenty.  
0
Russ CummingsIT ConsulantAuthor Commented:
One last minor point, when I access the menu, there is a 1 or 2 px height difference between the menu bar (at the end "Contact Us") and the banner underneath it. I've tried to alter both the menu height to make it less and when that didn't work, make the banner taller. That didn't work either. Then I tried making the width of the menu bar as long as the banner <div>, no luck.
What exactly do I adjust to manage this fine alteration?
again my page is www.automatedanswers.com/telnet1
Thank you,
Russ
0
Jason C. LevineNo oneCommented:
I'm on the iPad for the next few hours, but I'll take a look at this later tonight.  
0
Jason C. LevineNo oneCommented:
Are you talking about the variable gap between the menu bar and the word "Home" below it?
0
IanThCommented:
I have seen that and its was down to a ie conflict
try it with firefox or chrome
I did have a warning in dw though saying that
0
Russ CummingsIT ConsulantAuthor Commented:
No, this is after you hover over any submenu, then look to the "Contact Us" menu choice, there is a difference of just 1 - 2 px. The menu option is just that much higher. Maybe I'm just picky, but the client will notice as well.

Russ
0
Jason C. LevineNo oneCommented:
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Dreamweaver

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.