5 Replies Latest reply on Feb 19, 2014 12:15 PM by JimDamrau

    spry menu overlap

    JimDamrau Level 1

      horizontal spry menu which has submenus is being overlapped by another div. How do you get the menu to display over the second div?

        • 1. Re: spry menu overlap
          Jon Fritz II Adobe Community Professional & MVP

          Depending on how you have it set up, it could be as simple as adding a z-index setting to the menu.

           

          Could you post a link?

          • 2. Re: spry menu overlap
            JimDamrau Level 1

            Jon;

             

            Unfortunately I cannot as the page is behind a firewall. But what I can do is provide the code for the page.  Interesting enough if I view it in the Dreamweaver application is looks fine but when I look at it in IE the submenu appears behind the second DIV.

             

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>CSDB Templates </title> <link rel="stylesheet" href="emx_nav_left.css" type="text/css"> <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script> <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css"> </head> <body> <div id="masthead"> <h1 id="siteName">Radiant Mercury Customer Support Site</h1> <div id="utility">   <table width="75%" border="0" cellspacing="0" cellpadding="0">   <tr><td>     <div align="center">       <% if Session("MM_UserAuthorization") <> "" Then %>

                  Logout

                  <% Else %>

                  Login

                  <% End if %>     </div></td>   </tr> </table>   </div>     <ul id="MenuBar1" class="MenuBarHorizontal">        <li>[Item 1 | #]          <ul>            <li>[Item 1.1 | #]</li>            <li>[Item 1.2 | #]</li>            <li>[Item 1.3 | #]</li>          </ul>        </li>        <li>[Item 2 | #]</li>        <li>[Item 3 | #]          <ul>            <li>[Item 3.1 | #]              <ul>                <li>[Item 3.1.1 | #]</li>                <li>[Item 3.1.2 | #]</li>              </ul>            </li>            <li>[Item 3.2 | #]</li>            <li>[Item 3.3 | #]</li>          </ul>        </li>        <li>[Item 4 | #]</li>     </ul>     <form id="search" method="get" action="cust_listing.asp?custname=Request(searchfor)">       <input name="custname" type="text" id="custname" size="10">       <input name="Search" type="submit" id="Search" value="Search">     </form> </div> <!-- end masthead --> <div id="pagecell1">

              <!pagecell1>

             

             

             

             

               

                      

             

             

            main area








                About Us |Site
            Map
            | Privacy Policy | CSDB Change  Request | Help Support | Lockheed Martin</div>

            </div>

             

            <!end pagecell1>







            <!--

            var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", );

            //-->

            </script>

            </body>

            </html>

             

            The style sheet emx_nav_left.css is as follows:

             

            /***********************************************/

            /* emx_nav_left.css                            */

            /* Use with template Halo_leftNav.html         */

            /***********************************************/

             

            /***********************************************/

            /* HTML tag styles                             */

            /***********************************************/

            body{

                            font-family: Arial,sans-serif;

                            color: #333333;

                            line-height: 1.166;

                            margin: 0px;

                            padding: 0px;

                            background: #cccccc url("bg_grad.jpg") fixed;

            }

             

            /******* hyperlink and anchor tag styles *******/

             

            a:link, a:visited

             

            a:hover{

                            text-decoration: underline;

            }

             

            /************** header tag styles **************/

             

            h1

             

            h2

             

            h3

             

            h4

             

            h5

             

             

            /*************** list tag styles ***************/

             

            ul{

            list-style-type: square;

            }

             

            ul ul{

            list-style-type: disc;

            }

             

            ul ul ul{

            list-style-type: none;

            }

             

            /********* form and related tag styles *********/

             

            form

             

            label

             

            input{

            font-family: Arial,sans-serif;

            }

             

            /***********************************************/

            /* Layout Divs                                 */

            /***********************************************/

            #pagecell1

             

            #tl

             

            #tr

             

            #masthead

             

            #pageNav

             

            #content

             

             

            /***********************************************/

            /* Component Divs                              */

            /***********************************************/

            #siteName

             

            /************** utility styles *****************/

             

            #utility

             

            #utility a

             

            #utility a:hover{

                            text-decoration: underline;

            }

             

            /************** pageName styles ****************/

             

            #pageName

             

            #pageName h2

             

            #pageName img

             

            /************* globalNav styles ****************/

             

            #globalNav

             

            #globalNav img{

                            margin-bottom: -4px;

            }

             

            #gnl

             

            #gnr

             

            #globalLink

             

             

            a.glink, a.glink:visited{

                            font-size: 9pt;

                            color: #000000;

                            font-weight: bold;

                            margin: 0px;

                            padding: 2px 5px 4px 5px;

                            border-right: 1px solid #8FB8BC;

            }

             

            a.glink:hover{

                            background-image:  url("glblnav_selected.gif");

                            text-decoration: none;

            }

             

            .skipLinks

             

            /************ subglobalNav styles **************/

             

            .subglobalNav

             

            .subglobalNav a:link, .subglobalNav a:visited {

                            font-size: 80%;

                            color: #ffffff;

            }

             

            .subglobalNav a:hover

             

            /*************** search styles *****************/

             

            #search

             

            #search input{

              font-size: 70%;

              margin: 0px  0px 0px 10px;

            }

            #search a:link, #search a:visited {

                            font-size: 80%;

                            font-weight: bold;

             

            }

             

            #search a:hover

             

             

            /************* breadCrumb styles ***************/

             

            #breadCrumb

             

            #breadCrumb a

             

            #breadCrumb a:hover

             

             

            /************** feature styles *****************/

             

            .feature

            html>body .feature

             

            .feature h3

             

            .feature img

             

             

            /*************** story styles ******************/

             

            .story

             

            .story h3

             

            .story p

             

            .story a.capsule

             

            .story a.capsule:hover{

                            text-decoration: underline;

            }

             

            td.storyLeft{

                            padding-right: 12px;

            }

             

             

            /************** siteInfo styles ****************/

             

            #siteInfo

             

            #siteInfo img

             

             

            /************ sectionLinks styles **************/

             

            #sectionLinks

             

            #sectionLinks h3

             

            #sectionLinks a:link, #sectionLinks a:visited

             

            #sectionLinks a:hover{

                            border-top: 1px solid #cccccc;

                            background-color: #DDEEFF;

                            background-image: none;

                            font-weight: bold;

                            text-decoration: none;

            }

             

             

            /************* relatedLinks styles **************/

             

            .relatedLinks

             

            .relatedLinks h3

             

            .relatedLinks a

             

             

            /**************** advert styles *****************/

             

            #advert

             

            #advert img

             

            /********************* end **********************/

             

            Please let me know if you need any additional information.

             

            Thanks for your help.

             

             

            James A Damrau

            Lockheed Martin

            Radiant Mercury Program

            IS&GS

            303-932-4448

            • 3. Re: spry menu overlap
              JimDamrau Level 1

              Jon;

               

              Sorry I should have included the code for the template. Here it is

               

              "http://www.w3.org/TR/html4/loose.dtd">
















              function menu(allitems,thisitem,startstate){
              callname= "gl"+thisitem;
              divname="subglobal"+thisitem;
              this.numberofmenuitems = 13;
              this.caller = document.getElementById(callname);
              this.thediv = document.getElementById(divname);
              this.thediv.style.visibility = startstate;
              }

              function ehandler(event,theobj){

                for (var i=1; i<= theobj.numberofmenuitems; i++){

                  var shutdiv =eval( "menuitem"i".thediv");

                  shutdiv.style.visibility="hidden";

                }

                theobj.thediv.style.visibility="visible";

              }

               

              function closesubnav(event){

                if ((event.clientY <48)||(event.clientY > 107)){

                  for (var i=1; i<= numofitems; i++){

                    var shutdiv =eval('menuitem'i'.thediv');

                    shutdiv.style.visibility='hidden';

                  }

                }

              }

              // -->


              <!--

              .style2 {font-size: small}

              .style3 {font-weight: bold}

              .style4

              -->

              </style> <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css"> </head> <!-- DW6 --> <body> <div id="masthead"> <h1 id="siteName">Radiant Mercury Customer Support Site</h1> <div id="utility">   <table width="75%" border="0" cellspacing="0" cellpadding="0">   <tr><td>     <div align="center">       <% if Session("MM_UserAuthorization") <> "" Then %>

                    Logout

                    <% Else %>

                    Login

                    <% End if %>     </div></td>   </tr> </table>   </div>     <ul id="MenuBar1" class="MenuBarHorizontal">        <li>[Item 1 | #]          <ul>            <li>[Item 1.1 | #]</li>            <li>[Item 1.2 | #]</li>            <li>[Item 1.3 | #]</li>          </ul>        </li>        <li>[Item 2 | #]</li>        <li>[Item 3 | #]          <ul>            <li>[Item 3.1 | #]              <ul>                <li>[Item 3.1.1 | #]</li>                <li>[Item 3.1.2 | #]</li>              </ul>            </li>            <li>[Item 3.2 | #]</li>            <li>[Item 3.3 | #]</li>          </ul>        </li>        <li>[Item 4 | #]</li>     </ul>     <form id="search" method="get" action="../cust_listing.asp?custname=Request(searchfor)">       <input name="custname" type="text" id="custname" size="10">       <input name="Search" type="submit" id="Search" value="Search">     </form> </div> <!-- end masthead --> <div id="pagecell1">

                <!pagecell1>

               

               

               

               

                 


                   

                        

               

                 




              main area








                  About Us |Site
              Map
              | Privacy Policy | CSDB Change  Request | Help Support | Lockheed Martin</div>

              </div>

               

              <!end pagecell1>







              <!--

              var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", );

              //-->

              </script>

              </body>

              </html>

               

              James A Damrau

              Lockheed Martin

              Radiant Mercury Program

              IS&GS

              303-932-4448

              • 4. Re: spry menu overlap
                Jon Fritz II Adobe Community Professional & MVP

                Could you come to the forum itself in a browser and repost your code?

                 

                Email responses with code get messed up.

                • 5. Re: spry menu overlap
                  JimDamrau Level 1

                  This is the page source code

                   

                   

                   

                   

                   

                  Radiant Mercury Customer Support Site

                       
                    
                              Logout            Login         
                   
                           
                                  
                        
                        

                            

                       
                                  

                  main area

                       

                           

                   

                   

                   

                   

                  This is the emx_nav_left.css code /***********************************************/ /* emx_nav_left.css                            */ /* Use with template Halo_leftNav.html        */ /***********************************************/ /***********************************************/ /* HTML tag styles                            */ /***********************************************/ body{ font-family: Arial,sans-serif; color: #333333; line-height: 1.166; margin: 0px; padding: 0px; background: #cccccc url("bg_grad.jpg") fixed; } /******* hyperlink and anchor tag styles *******/ a:link, a:visited{ color: #005FA9; text-decoration: none; } a:hover{ text-decoration: underline; } /************** header tag styles **************/ h1{ font: bold 120% Arial,sans-serif; color: #334d55; margin: 0px; padding: 0px; } h2{ font: bold 114% Arial,sans-serif; color: #006699; margin: 0px; padding: 0px; } h3{ font: bold 100% Arial,sans-serif; color: #334d55; margin: 0px; padding: 0px; } h4{ font: 100% Arial,sans-serif; color: #333333; margin: 0px; padding: 0px; } h5{ font: 100% Arial,sans-serif; color: #334d55; margin: 0px; padding: 0px; } /*************** list tag styles ***************/ ul{ list-style-type: square; } ul ul{ list-style-type: disc; } ul ul ul{ list-style-type: none; } /********* form and related tag styles *********/ form { margin: 0; padding: 0; } label{ font: bold 1em Arial,sans-serif; color: #334d55; } input{ font-family: Arial,sans-serif; } /***********************************************/ /* Layout Divs                                */ /***********************************************/ #pagecell1{ position:absolute; top: 112px; left: 2%; right: 2%; width:95.6%; background-color: #ffffff; } #tl { position:absolute; top: -1px; left: -1px; margin: 0px; padding: 0px; z-index: 100; } #tr { position:absolute; top: -1px; right: -1px; margin: 0px; padding: 0px; z-index: 100; } #masthead{ position: absolute; top: 0px; left: 2%; right: 2%; width:1346px; height: 75px; visibility: visible; } #pageNav{ float: left; width:178px; padding: 0px; background-color: #F5f7f7; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; font: small Verdana,sans-serif; } #content{ padding: 0px 10px 0px 0px; margin:0px 0px 0px 178px; border-left: 1px solid #ccd2d2; } /***********************************************/ /* Component Divs                              */ /***********************************************/ #siteName{ margin: 0px; padding: 16px 0px 8px 0px; color: #ffffff; font-weight: normal; } /************** utility styles *****************/ #utility{ font: 75% Verdana,sans-serif; position: absolute; top: 14px; right: 0px; color: #919999; left: 845px; } #utility a{ color: #ffffff; } #utility a:hover{ text-decoration: underline; } /************** pageName styles ****************/ #pageName{ padding: 0px 0px 14px 10px; margin: 0px; border-bottom:1px solid #ccd2d2; } #pageName h2{ font: bold 175% Arial,sans-serif; color: #000000; margin:0px; padding: 0px; } #pageName img{ position: absolute; top: 14px; right: 6px; padding: 0px; margin: 0px; left: 622px; width: 124px; height: 38px; background-image: url(../Sunset.jpg); } /************* globalNav styles ****************/ #globalNav{ position: relative; width: 100%; min-width: 640px; height: 32px; color: #cccccc; padding: 0px; margin: 0px; background-image:  url("glbnav_background.gif"); } #globalNav img{ margin-bottom: -4px; } #gnl { position: absolute; top: 0px; left:0px; } #gnr { position: absolute; top: 0px; right:0px; } #globalLink{ position: absolute; top: 6px; height: 22px; min-width: 900px; padding: 0px; margin: 0px; left: 10px; z-index: 100; width: 1209px; } a.glink, a.glink:visited{   font-size: 9pt;   color: #000000; font-weight: bold; margin: 0px; padding: 2px 5px 4px 5px; border-right: 1px solid #8FB8BC; } a.glink:hover{   background-image:  url("glblnav_selected.gif"); text-decoration: none; } .skipLinks {display: none;} /************ subglobalNav styles **************/ .subglobalNav{ position: absolute; top: 84px; left: 0px; /*width: 100%;*/ min-width: 640px; height: 20px; padding: 0px 0px 0px 10px; visibility: hidden; color: #ffffff; } .subglobalNav a:link, .subglobalNav a:visited { font-size: 80%; color: #ffffff; } .subglobalNav a:hover{ color: #cccccc; } /*************** search styles *****************/ #search{ position: absolute; top: 5px; right: 10px; z-index: 101; } #search input{   font-size: 70%;   margin: 0px  0px 0px 10px; } #search a:link, #search a:visited { font-size: 80%; font-weight: bold; } #search a:hover{ margin: 0px; } /************* breadCrumb styles ***************/ #breadCrumb{ padding: 5px 0px 5px 10px; font: small Verdana,sans-serif; color: #AAAAAA; } #breadCrumb a{ color: #AAAAAA; } #breadCrumb a:hover{ color: #005FA9; text-decoration: underline; } /************** feature styles *****************/ .feature{ padding: 0px 0px 10px 10px; font-size: 80%; min-height: 200px; height: 200px; } html>body .feature {height: auto;} .feature h3{ font: bold 175% Arial,sans-serif; color: #000000; padding: 30px 0px 5px 0px; } .feature img{ float: left; padding: 0px 10px 0px 0px; } /*************** story styles ******************/ .story { padding: 10px 0px 0px 10px; font-size: 80%; } .story h3{ font: bold 125% Arial,sans-serif; color: #000000; } .story p { padding: 0px 0px 10px 0px; } .story a.capsule{ font: bold 1em Arial,sans-serif; color: #005FA9; display:block; padding-bottom: 5px; } .story a.capsule:hover{ text-decoration: underline; } td.storyLeft{ padding-right: 12px; } /************** siteInfo styles ****************/ #siteInfo{ clear: both; border-top: 1px solid #cccccc; font-size: small; color: #cccccc; padding: 10px 10px 10px 10px; margin-top: 0px; } #siteInfo img{ padding: 4px 4px 4px 0px; vertical-align: middle; } /************ sectionLinks styles **************/ #sectionLinks{ margin: 0px; padding: 0px; } #sectionLinks h3{ padding: 10px 0px 2px 10px; border-bottom: 1px solid #cccccc; } #sectionLinks a:link, #sectionLinks a:visited { display: block; border-top: 1px solid #ffffff; border-bottom: 1px solid #cccccc; background-image:  url("bg_nav.jpg"); font-weight: bold; padding: 3px 0px 3px 10px; color: #21536A; } #sectionLinks a:hover{ border-top: 1px solid #cccccc; background-color: #DDEEFF; background-image: none; font-weight: bold; text-decoration: none; } /************* relatedLinks styles **************/ .relatedLinks{ margin: 0px; padding: 0px 0px 10px 10px; border-bottom: 1px solid #cccccc; } .relatedLinks h3{ padding: 10px 0px 2px 0px; } .relatedLinks a{ display: block; } /**************** advert styles *****************/ #advert{ padding: 10px; } #advert img{ display: block; } /********************* end **********************/ This is the template code (csdb_spry.dwt) /***********************************************/ /* emx_nav_left.css                            */ /* Use with template Halo_leftNav.html        */ /***********************************************/ /***********************************************/ /* HTML tag styles                            */ /***********************************************/ body{ font-family: Arial,sans-serif; color: #333333; line-height: 1.166; margin: 0px; padding: 0px; background: #cccccc url("bg_grad.jpg") fixed; } /******* hyperlink and anchor tag styles *******/ a:link, a:visited{ color: #005FA9; text-decoration: none; } a:hover{ text-decoration: underline; } /************** header tag styles **************/ h1{ font: bold 120% Arial,sans-serif; color: #334d55; margin: 0px; padding: 0px; } h2{ font: bold 114% Arial,sans-serif; color: #006699; margin: 0px; padding: 0px; } h3{ font: bold 100% Arial,sans-serif; color: #334d55; margin: 0px; padding: 0px; } h4{ font: 100% Arial,sans-serif; color: #333333; margin: 0px; padding: 0px; } h5{ font: 100% Arial,sans-serif; color: #334d55; margin: 0px; padding: 0px; } /*************** list tag styles ***************/ ul{ list-style-type: square; } ul ul{ list-style-type: disc; } ul ul ul{ list-style-type: none; } /********* form and related tag styles *********/ form { margin: 0; padding: 0; } label{ font: bold 1em Arial,sans-serif; color: #334d55; } input{ font-family: Arial,sans-serif; } /***********************************************/ /* Layout Divs                                */ /***********************************************/ #pagecell1{ position:absolute; top: 112px; left: 2%; right: 2%; width:95.6%; background-color: #ffffff; } #tl { position:absolute; top: -1px; left: -1px; margin: 0px; padding: 0px; z-index: 100; } #tr { position:absolute; top: -1px; right: -1px; margin: 0px; padding: 0px; z-index: 100; } #masthead{ position: absolute; top: 0px; left: 2%; right: 2%; width:1346px; height: 75px; visibility: visible; } #pageNav{ float: left; width:178px; padding: 0px; background-color: #F5f7f7; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; font: small Verdana,sans-serif; } #content{ padding: 0px 10px 0px 0px; margin:0px 0px 0px 178px; border-left: 1px solid #ccd2d2; } /***********************************************/ /* Component Divs                              */ /***********************************************/ #siteName{ margin: 0px; padding: 16px 0px 8px 0px; color: #ffffff; font-weight: normal; } /************** utility styles *****************/ #utility{ font: 75% Verdana,sans-serif; position: absolute; top: 14px; right: 0px; color: #919999; left: 845px; } #utility a{ color: #ffffff; } #utility a:hover{ text-decoration: underline; } /************** pageName styles ****************/ #pageName{ padding: 0px 0px 14px 10px; margin: 0px; border-bottom:1px solid #ccd2d2; } #pageName h2{ font: bold 175% Arial,sans-serif; color: #000000; margin:0px; padding: 0px; } #pageName img{ position: absolute; top: 14px; right: 6px; padding: 0px; margin: 0px; left: 622px; width: 124px; height: 38px; background-image: url(../Sunset.jpg); } /************* globalNav styles ****************/ #globalNav{ position: relative; width: 100%; min-width: 640px; height: 32px; color: #cccccc; padding: 0px; margin: 0px; background-image:  url("glbnav_background.gif"); } #globalNav img{ margin-bottom: -4px; } #gnl { position: absolute; top: 0px; left:0px; } #gnr { position: absolute; top: 0px; right:0px; } #globalLink{ position: absolute; top: 6px; height: 22px; min-width: 900px; padding: 0px; margin: 0px; left: 10px; z-index: 100; width: 1209px; } a.glink, a.glink:visited{   font-size: 9pt;   color: #000000; font-weight: bold; margin: 0px; padding: 2px 5px 4px 5px; border-right: 1px solid #8FB8BC; } a.glink:hover{   background-image:  url("glblnav_selected.gif"); text-decoration: none; } .skipLinks {display: none;} /************ subglobalNav styles **************/ .subglobalNav{ position: absolute; top: 84px; left: 0px; /*width: 100%;*/ min-width: 640px; height: 20px; padding: 0px 0px 0px 10px; visibility: hidden; color: #ffffff; } .subglobalNav a:link, .subglobalNav a:visited { font-size: 80%; color: #ffffff; } .subglobalNav a:hover{ color: #cccccc; } /*************** search styles *****************/ #search{ position: absolute; top: 5px; right: 10px; z-index: 101; } #search input{   font-size: 70%;   margin: 0px  0px 0px 10px; } #search a:link, #search a:visited { font-size: 80%; font-weight: bold; } #search a:hover{ margin: 0px; } /************* breadCrumb styles ***************/ #breadCrumb{ padding: 5px 0px 5px 10px; font: small Verdana,sans-serif; color: #AAAAAA; } #breadCrumb a{ color: #AAAAAA; } #breadCrumb a:hover{ color: #005FA9; text-decoration: underline; } /************** feature styles *****************/ .feature{ padding: 0px 0px 10px 10px; font-size: 80%; min-height: 200px; height: 200px; } html>body .feature {height: auto;} .feature h3{ font: bold 175% Arial,sans-serif; color: #000000; padding: 30px 0px 5px 0px; } .feature img{ float: left; padding: 0px 10px 0px 0px; } /*************** story styles ******************/ .story { padding: 10px 0px 0px 10px; font-size: 80%; } .story h3{ font: bold 125% Arial,sans-serif; color: #000000; } .story p { padding: 0px 0px 10px 0px; } .story a.capsule{ font: bold 1em Arial,sans-serif; color: #005FA9; display:block; padding-bottom: 5px; } .story a.capsule:hover{ text-decoration: underline; } td.storyLeft{ padding-right: 12px; } /************** siteInfo styles ****************/ #siteInfo{ clear: both; border-top: 1px solid #cccccc; font-size: small; color: #cccccc; padding: 10px 10px 10px 10px; margin-top: 0px; } #siteInfo img{ padding: 4px 4px 4px 0px; vertical-align: middle; } /************ sectionLinks styles **************/ #sectionLinks{ margin: 0px; padding: 0px; } #sectionLinks h3{ padding: 10px 0px 2px 10px; border-bottom: 1px solid #cccccc; } #sectionLinks a:link, #sectionLinks a:visited { display: block; border-top: 1px solid #ffffff; border-bottom: 1px solid #cccccc; background-image:  url("bg_nav.jpg"); font-weight: bold; padding: 3px 0px 3px 10px; color: #21536A; } #sectionLinks a:hover{ border-top: 1px solid #cccccc; background-color: #DDEEFF; background-image: none; font-weight: bold; text-decoration: none; } /************* relatedLinks styles **************/ .relatedLinks{ margin: 0px; padding: 0px 0px 10px 10px; border-bottom: 1px solid #cccccc; } .relatedLinks h3{ padding: 10px 0px 2px 0px; } .relatedLinks a{ display: block; } /**************** advert styles *****************/ #advert{ padding: 10px; } #advert img{ display: block; } /********************* end **********************/ The appearnace of the menu works fine in the Dreamweaver View mode but when viewed in IE 8.0 the submenus appear below the pagecell1 DIV. Thanks!