[x]
Posted via EE Mobile

Search, ask, and monitor your questions on the go with EE Mobile. Visit Experts Exchange from your mobile device and never be out of touch again.
Question
[x]
Attachment Details
[x]
The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

  • The Grade of the Solution
  • The Zone Rank of the Expert Providing the Solution
  • The Number of Author and Expert Comments
  • The Number of Experts Contributing
  • The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!
9.5

Vertical Menu Drop Down will not overlap into div below it

Asked by Simon336697 in Cascading Style Sheets (CSS), Hypertext Markup Language (HTML)

Hi guys hope you are all well, and would love your kind help.
I have one html file that Im working on called homepage.html.
Here's a quick outline of its structure.

homepage.html
-------------------------------------------------------------------------------------------------------
<div id="topframe">
<div class=menu style="margin: 0 auto">
<div>
</div>
-------------------------------------------------------------------------------------------------------
<div id="maincontent">
<div class="innertube">
</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------------------------------

In the above, the menu is placed inside a div called "menu"
The problem I have is that I cant get the menu to drop down and overlap into the divs below it when I hover over any of the menu items. They all get cut off and wont penetrate over the top of the content outside its own div area. Im really struggling with this and would love your help.
What im trying to do is to have a top vertical nav bar, that remains visible always on the page, so that only the main content div scrolls, which ive made position fixed.
Any help on this would be greatly appreciated.
Here is the entire code of my homepage.html below. There are no other files im referencing whatsoever, so the css markup is inline in the homepage.html file below.
I have also attached a picture to give you guys more of an idea of the problem im having.
Any help appreciated. Guys you will also notice that there is a problem in IE (only) with a second vertical scrollbar being viewed, which id love to remove. Thanks.

---------------------------------------------------------------------------------------------------- homepage.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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Top Frame Layout</title>
<style type="text/css">



/* ------------------------------------------------------------------------------------ */

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}

#topframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40px; /*Height of frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: black;
color: white;
}


#maincontent{
position: fixed;
top: 40px; /*Set top value to HeightOfTopFrameDiv*/
left: 0;
right: 0;
bottom: 0;
overflow: auto;
background: #fff;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 40px 0 0 0; /*Set value to (HeightOfTopFrameDiv 0 0 0)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}

/* ------------------------------------------------------------------------------------ */

.menu {
      FONT-SIZE: 0.85em; PADDING-BOTTOM: 200px; WIDTH: 950px;
}
.menu UL {
      PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
.menu UL UL {
      WIDTH: 150px
}
.menu LI {
      FLOAT: left; WIDTH: 150px; POSITION: relative
}
.menu A {
      BORDER-RIGHT: black 1px solid; DISPLAY: block; PADDING-LEFT: 10px; FONT-SIZE: 11px; BACKGROUND: #7B7B7B; BORDER-LEFT: #fff 0px solid; WIDTH: 139px; COLOR: #fff; LINE-HEIGHT: 20px; BORDER-BOTTOM: black 1px solid; HEIGHT: 20px; TEXT-DECORATION: none
}
.menu A:visited {
      BORDER-RIGHT: #fff 1px solid; BORDER-TOP: black 1px solid; DISPLAY: block; PADDING-LEFT: 10px; FONT-SIZE: 11px; BACKGROUND: #758279; BORDER-LEFT: #fff 0px solid; WIDTH: 139px; COLOR: #fff; LINE-HEIGHT: 20px; BORDER-BOTTOM: #fff 0px solid; HEIGHT: 20px; TEXT-DECORATION: none
}
* HTML .menu A {
      WIDTH: 139px
}
* HTML .menu A:visited {
      WIDTH: 139px
}
.menu UL UL A.drop {
      BACKGROUND: #949e7c
}
.menu UL UL A.drop:visited {
      BACKGROUND: #949e7c
}
.menu UL UL A.drop:hover {
      BACKGROUND: #c9ba65
}
.menu UL UL :hover > A.drop {
      BACKGROUND: #c9ba65
}
.menu UL UL UL A {
      BACKGROUND: #e2dfa8
}
.menu UL UL UL A:visited {
      BACKGROUND: #e2dfa8
}
.menu UL UL UL A:hover {
      BACKGROUND: #b2ab9b
}
.menu UL UL UL :hover > A {
      BACKGROUND: #b2ab9b
}
.menu UL UL {
      LEFT: 0px; VISIBILITY: hidden; WIDTH: 150px; POSITION: absolute; TOP: 21px; HEIGHT: 0px
}
* HTML .menu UL UL {
      TOP: 21px
}
.menu UL UL UL {
      LEFT: 150px; WIDTH: 150px; TOP: 0px
}
.menu UL UL UL.left {
      LEFT: -150px
}
.menu TABLE {
      LEFT: 0px; POSITION: absolute; TOP: 0px
}
.menu UL UL A {
      PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: #d4d8bd; PADDING-BOTTOM: 5px; WIDTH: 129px; COLOR: #000; LINE-HEIGHT: 1em; PADDING-TOP: 5px; HEIGHT: auto
}
.menu UL UL A:visited {
      PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: #d4d8bd; PADDING-BOTTOM: 5px; WIDTH: 129px; COLOR: #000; LINE-HEIGHT: 1em; PADDING-TOP: 5px; HEIGHT: auto
}
* HTML .menu UL UL A {
      WIDTH: 129px
}
.menu A:hover {
      BACKGROUND: #949e7c; COLOR: #fff
}
.menu UL UL A:hover {
      BACKGROUND: #949e7c; COLOR: #fff
}
.menu :hover > A {
      BACKGROUND: #949e7c; COLOR: #fff
}
.menu UL UL :hover > A {
      BACKGROUND: #949e7c; COLOR: #fff
}
.menu UL LI:hover UL {
      VISIBILITY: visible
}
.menu UL A:hover UL {
      VISIBILITY: visible
}
.menu UL :hover UL UL {
      VISIBILITY: hidden
}
.menu UL :hover UL :hover UL UL {
      VISIBILITY: hidden
}
.menu UL :hover UL :hover UL {
      VISIBILITY: visible
}
.menu UL :hover UL :hover UL :hover UL {
      VISIBILITY: visible
}




</style>

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>

</head>

<body>

<div id="topframe">
      
<!--
<div class="innertube">

<b>CSS Top Frame Layout</b>

</div>
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ -->


<DIV class=menu style="margin: 0 auto">
      
<!-- @@@@@ START OF MENU -->
            
<UL>
      
<!-- @ --><!-- @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ START MENU - HOME -->        
      

  <LI><A href="http://www.cssplay.co.uk/mozilla/index.html">Home<!--[if IE 7]>
        <!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
      </LI>
      
      
<!-- @ --><!-- @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ START MENU - IT -->        
      
        <LI>
            <A href="http://www.cssplay.co.uk/menu/index.html">IT<!--[if IE 7]><!--></A>
              <!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

              <UL>
                           
                <LI><A title="About this menu" href="http://www.cssplay.co.uk/menu/zero_dollars.html">About this menu</A> </LI>
               
<!-- @ --><!-- .......................................................................................... START DROP DOWN -->  
                <LI>
                      <A class=drop title="Scripting" href="http://www.cssplay.co.uk/menu/hover_click.html">Scripting<!--[if IE 7]><!--></A>
                     <!--<![endif]-->
                     <!--[if lte IE 6]><table><tr><td><![endif]-->

<!-- @@@@@@@@-->      <UL>
                                    
                                  <!-- @@@@@ START FLYOUT -->                                   
                                    <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Perl »
                                    <!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

                                          <UL>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Documents</A> </LI>                                                  
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Scripts</A> </LI>            
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Theory</A> </LI>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Videos</A> </LI>        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Miscellaneous</A></LI>
                                          </UL>
                                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                    </LI>
                                    
                                  <!-- @@@@@ END FLYOUT -->                                           

                                  <!-- @@@@@ START FLYOUT -->                                   
                                    <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">PHP »
                                    <!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

                                          <UL>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Documents</A> </LI>                                                        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Scripts</A> </LI>            
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Theory</A> </LI>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Videos</A> </LI>        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Miscellaneous</A></LI>
                                          </UL>
                                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                    </LI>
                                    
                                  <!-- @@@@@ END FLYOUT -->                                          
                                    
                                  <!-- @@@@@ START FLYOUT -->                                          
                                    <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">VBScript »
                                    <!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

                                          <UL>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Documents</A> </LI>                                                        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Scripts</A> </LI>            
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Theory</A> </LI>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Videos</A> </LI>        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Miscellaneous</A></LI>
                                          </UL>
                                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                    </LI>
                                    
                                  <!-- @@@@@ END FLYOUT -->       
                                  
                                  <!-- @@@@@ START FLYOUT -->                                          
                                    <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Javascript »
                                    <!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

                                          <UL>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Documents</A> </LI>                                                        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Scripts</A> </LI>            
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Theory</A> </LI>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Videos</A> </LI>        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Miscellaneous</A></LI>
                                          </UL>
                                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                    </LI>
                                    
                                  <!-- @@@@@ END FLYOUT -->      
                                  
                                  <!-- @@@@@ START FLYOUT -->                                          
                                    <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">HTML »
                                    <!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

                                          <UL>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Documents</A> </LI>                                                        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Scripts</A> </LI>            
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Theory</A> </LI>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Videos</A> </LI>        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Miscellaneous</A></LI>
                                          </UL>
                                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                    </LI>
                                    
                                  <!-- @@@@@ END FLYOUT -->                                                 
                                  
                                  <!-- @@@@@ START FLYOUT -->                                          
                                    <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">XML »
                                    <!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

                                          <UL>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Documents</A> </LI>                                                        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Scripts</A> </LI>            
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Theory</A> </LI>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Videos</A> </LI>        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Miscellaneous</A></LI>
                                          </UL>
                                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                    </LI>
                                    
                                  <!-- @@@@@ END FLYOUT -->      
                                  
                                  <!-- @@@@@ START FLYOUT -->                                          
                                    <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">AJAX »
                                    <!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

                                          <UL>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Documents</A> </LI>                                                        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Scripts</A> </LI>            
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Theory</A> </LI>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Videos</A> </LI>        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Miscellaneous</A></LI>
                                          </UL>
                                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                    </LI>
                                    
                                  <!-- @@@@@ END FLYOUT -->
                                  
                                  <!-- @@@@@ START FLYOUT -->                                          
                                    <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Windows Batch »
                                    <!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

                                          <UL>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Documents</A> </LI>                                                        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Scripts</A> </LI>            
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Theory</A> </LI>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Videos</A> </LI>        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Miscellaneous</A></LI>
                                          </UL>
                                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                    </LI>
                                    
                                  <!-- @@@@@ END FLYOUT -->       
                                  
                                  <!-- @@@@@ START FLYOUT -->                                          
                                    <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Linux Shell »
                                    <!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

                                          <UL>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Documents</A> </LI>                                                        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Scripts</A> </LI>            
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Theory</A> </LI>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Videos</A> </LI>        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Miscellaneous</A></LI>
                                          </UL>
                                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                    </LI>
                                    
                                  <!-- @@@@@ END FLYOUT -->                                                                                                                                                       
                                                                                                                                       
                                                                        
<!-- @@@@@@@@-->      </UL>

                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                 </LI>
<!-- @ --><!-- .......................................................................................... END DROP DOWN -->    
   
<!-- @ --><!-- .......................................................................................... START DROP DOWN -->  
                <LI>
                      <A class=drop title="Certification" href="http://www.cssplay.co.uk/menu/hover_click.html">Certification<!--[if IE 7]><!--></A>
                     <!--<![endif]-->
                     <!--[if lte IE 6]><table><tr><td><![endif]-->

<!-- @@@@@@@@-->      <UL>
                                    
                                  <!-- @@@@@ START FLYOUT -->                                   
                                    <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Microsoft »
                                    <!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

                                          <UL>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Documents</A> </LI>                                                  
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Scripts</A> </LI>            
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Theory</A> </LI>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Videos</A> </LI>        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Miscellaneous</A></LI>
                                          </UL>
                                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                    </LI>
                                    
                                  <!-- @@@@@ END FLYOUT -->                                           

                                  <!-- @@@@@ START FLYOUT -->                                   
                                    <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Cisco »
                                    <!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

                                          <UL>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Documents</A> </LI>                                                        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Scripts</A> </LI>            
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Theory</A> </LI>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Videos</A> </LI>        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Miscellaneous</A></LI>
                                          </UL>
                                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                    </LI>
                                    
                                  <!-- @@@@@ END FLYOUT -->                                          
                                    
                                  <!-- @@@@@ START FLYOUT -->                                          
                                    <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Redhat »
                                    <!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

                                          <UL>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Documents</A> </LI>                                                        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Scripts</A> </LI>            
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Theory</A> </LI>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Videos</A> </LI>        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Miscellaneous</A></LI>
                                          </UL>
                                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                    </LI>
                                    
                                  <!-- @@@@@ END FLYOUT -->       
                                  
                                  <!-- @@@@@ START FLYOUT -->                                          
                                    <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Exin »
                                    <!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

                                          <UL>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Documents</A> </LI>                                                        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Scripts</A> </LI>            
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Theory</A> </LI>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Videos</A> </LI>        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Miscellaneous</A></LI>
                                          </UL>
                                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                    </LI>
                                    
                                  <!-- @@@@@ END FLYOUT -->      
                                  
                                  <!-- @@@@@ START FLYOUT -->                                          
                                    <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Citrix »
                                    <!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

                                          <UL>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Documents</A> </LI>                                                        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Scripts</A> </LI>            
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Theory</A> </LI>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Videos</A> </LI>        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Miscellaneous</A></LI>
                                          </UL>
                                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                    </LI>
                                    
                                  <!-- @@@@@ END FLYOUT -->                                                 
                                  
                                  <!-- @@@@@ START FLYOUT -->                                          
                                    <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Miscellaneous »
                                    <!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

                                          <UL>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Documents</A> </LI>                                                        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Scripts</A> </LI>            
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Theory</A> </LI>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Videos</A> </LI>        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Miscellaneous</A></LI>
                                          </UL>
                                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                    </LI>
                                    
                                  <!-- @@@@@ END FLYOUT -->      
                                                                                                                                                                                   
                                                                                                                                       
                                                                        
<!-- @@@@@@@@-->      </UL>

                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                 </LI>
<!-- @ --><!-- .......................................................................................... END DROP DOWN -->      






  </UL>
 
 
  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </LI>
   
<!-- @ --><!-- @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ END MENU - IT -->      
 
<!-- @ --><!-- @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ START MENU WORK -->        
      
        <LI>
            <A href="http://www.cssplay.co.uk/menu/index.html">Work<!--[if IE 7]><!--></A>
              <!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

              <UL>
                           
                <LI><A title="The zero dollar ads page" href="http://www.cssplay.co.uk/menu/zero_dollars.html">About this menu</A> </LI>

<!-- @ --><!-- .......................................................................................... START DROP DOWN -->  
                <LI>
                      <A class=drop title="Edwards Dunlop" href="http://www.cssplay.co.uk/menu/hover_click.html">Edwards Dunlop<!--[if IE 7]><!--></A>
                     <!--<![endif]-->
                     <!--[if lte IE 6]><table><tr><td><![endif]-->

<!-- @@@@@@@@-->      <UL>
      
                                  <!-- @@@@@ START FLYOUT -->                                          
                                    <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">The Business »
                                    <!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

                                          <UL>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Documents</A> </LI>                                                        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Scripts</A> </LI>            
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Theory</A> </LI>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Videos</A> </LI>        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Miscellaneous</A></LI>
                                          </UL>
                                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                    </LI>
                                    
                                  <!-- @@@@@ END FLYOUT -->             
                                    
                                  <!-- @@@@@ START FLYOUT -->                                   
                                    <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Help Desk Support »
                                    <!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

                                          <UL>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Documents</A> </LI>                                                  
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Scripts</A> </LI>            
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Theory</A> </LI>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Videos</A> </LI>        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Miscellaneous</A></LI>
                                          </UL>
                                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                    </LI>
                                    
                                  <!-- @@@@@ END FLYOUT -->                                                                                                                             
                                                                                                                                                                                                                                                                                                                                                                                               
                                                                        
<!-- @@@@@@@@-->      </UL>

                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                 </LI>
<!-- @ --><!-- .......................................................................................... END DROP DOWN -->  

               
<!-- @ --><!-- .......................................................................................... START DROP DOWN -->  
                <LI>
                      <A class=drop title="Test href="http://www.cssplay.co.uk/menu/hover_click.html">Test<!--[if IE 7]><!--></A>
                     <!--<![endif]-->
                     <!--[if lte IE 6]><table><tr><td><![endif]-->

<!-- @@@@@@@@-->      <UL>
      
                                  <!-- @@@@@ START FLYOUT -->                                          
                                    <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">The Business »
                                    <!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

                                          <UL>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Documents</A> </LI>                                                        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Scripts</A> </LI>            
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Theory</A> </LI>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Videos</A> </LI>        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Miscellaneous</A></LI>
                                          </UL>
                                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                    </LI>
                                    
                                  <!-- @@@@@ END FLYOUT -->             
                                    
                                  <!-- @@@@@ START FLYOUT -->                                   
                                    <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">IS&O Store Systems »
                                    <!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

                                          <UL>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Documents</A> </LI>                                                  
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Scripts</A> </LI>            
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Theory</A> </LI>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Videos</A> </LI>        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Miscellaneous</A></LI>
                                          </UL>
                                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                    </LI>
                                    
                                  <!-- @@@@@ END FLYOUT -->                                           

                                  <!-- @@@@@ START FLYOUT -->                                   
                                    <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">IS&O Integration »
                                    <!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

                                          <UL>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Documents</A> </LI>                                                        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Scripts</A> </LI>            
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Theory</A> </LI>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Videos</A> </LI>        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Miscellaneous</A></LI>
                                          </UL>
                                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                    </LI>
                                    
                                  <!-- @@@@@ END FLYOUT -->                                          
                                    
                                  <!-- @@@@@ START FLYOUT -->                                          
                                    <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Platform Services »
                                    <!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

                                          <UL>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Documents</A> </LI>                                                        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Scripts</A> </LI>            
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Theory</A> </LI>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Videos</A> </LI>        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Miscellaneous</A></LI>
                                          </UL>
                                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                    </LI>
                                    
                                  <!-- @@@@@ END FLYOUT -->       
                                  
                                  <!-- @@@@@ START FLYOUT -->                                          
                                    <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Layered Products »
                                    <!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

                                          <UL>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Documents</A> </LI>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Projects</A> </LI>                                                                                                     
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Scripts</A> </LI>            
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Theory</A> </LI>
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Videos</A> </LI>        
                                            <LI><A href="http://www.cssplay.co.uk/menus/final_drop2.html#nogo">Miscellaneous</A></LI>
                                          </UL>
                                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                    </LI>
                                    
                                  <!-- @@@@@ END FLYOUT -->                                                                                  
                                                                                                                                                                                                                                                                                                                                                                                               
                                                                        
<!-- @@@@@@@@-->      </UL>

                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                 </LI>
<!-- @ --><!-- .......................................................................................... END DROP DOWN -->    
   
   
  </UL>
 
 
  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </LI>
   
<!-- @ --><!-- @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ END MENU WORK -->
 
 
 
<!-- @ --><!-- @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ START MENU HANDY -->
  <!-- Header -->
  <LI><A href="http://www.cssplay.co.uk/mozilla/index.html">Handy<!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

            <!-- menus -->
              <UL>
                <LI><A title="A drop down menu" href="http://www.cssplay.co.uk/mozilla/dropdown.html">drop down menu</A></LI>
                <LI><A title="A cascading menu" href="http://www.cssplay.co.uk/mozilla/cascade.html">cascading menu</A> </LI>
                <LI><A title="Using content:" href="http://www.cssplay.co.uk/mozilla/content.html">content:</A> </LI>
                <LI><A title=":hover applied to a div" href="http://www.cssplay.co.uk/mozilla/moxbox.html">mozzie box</A> </LI>
                <LI><A title="I can build a rainbow" href="http://www.cssplay.co.uk/mozilla/rainbow.html">I can build a rainbow with transparent borders</A> </LI>
                <LI><A title="Snooker cue" href="http://www.cssplay.co.uk/mozilla/snooker.html">a snooker cue using border art</A> </LI>
                <LI><A title="Target Practise" href="http://www.cssplay.co.uk/mozilla/target.html">target practise</A> </LI>
                <LI><A title="Two tone headings" href="http://www.cssplay.co.uk/mozilla/splittext.html">two tone headings</A> </LI>
                <LI><A title="Shadow text" href="http://www.cssplay.co.uk/mozilla/shadow_text.html">shadow text</A> </LI>    
            </UL>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
      </LI>

<!-- @ --><!-- @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ END MENU HANDY -->    
   
<!-- @ --><!-- @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ START MENU PERSONAL -->
  <!-- Header -->
  <LI><A href="http://www.cssplay.co.uk/mozilla/index.html">Personal<!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

            <!-- menus -->
              <UL>
                <LI><A title="A drop down menu" href="http://www.cssplay.co.uk/mozilla/dropdown.html">drop down menu</A></LI>
                <LI><A title="A cascading menu" href="http://www.cssplay.co.uk/mozilla/cascade.html">cascading menu</A> </LI>
                <LI><A title="Using content:" href="http://www.cssplay.co.uk/mozilla/content.html">content:</A> </LI>
                <LI><A title=":hover applied to a div" href="http://www.cssplay.co.uk/mozilla/moxbox.html">mozzie box</A> </LI>
                <LI><A title="I can build a rainbow" href="http://www.cssplay.co.uk/mozilla/rainbow.html">I can build a rainbow with transparent borders</A> </LI>
                <LI><A title="Snooker cue" href="http://www.cssplay.co.uk/mozilla/snooker.html">a snooker cue using border art</A> </LI>
                <LI><A title="Target Practise" href="http://www.cssplay.co.uk/mozilla/target.html">target practise</A> </LI>
                <LI><A title="Two tone headings" href="http://www.cssplay.co.uk/mozilla/splittext.html">two tone headings</A> </LI>
                <LI><A title="Shadow text" href="http://www.cssplay.co.uk/mozilla/shadow_text.html">shadow text</A> </LI>    
            </UL>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
      </LI>

<!-- @ --><!-- @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ END MENU HANDY -->  

<!-- @ --><!-- @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ START MENU ABOUT -->  

   
  <LI>
        
        <A href="http://www.cssplay.co.uk/opacity/index.html">About<!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

  <UL>
    <LI><A title="colour wheel" href="http://www.cssplay.co.uk/opacity/colours.html">About this menu</A> </LI>
    <LI><A title="a menu using opacity" href="http://www.cssplay.co.uk/opacity/picturemenu.html">a menu using opacity</A> </LI>
    <LI><A title="partial opacity" href="http://www.cssplay.co.uk/opacity/png.html">partial opacity</A> </LI>
    <LI><A title="partial opacity II" href="http://www.cssplay.co.uk/opacity/png2.html">partial opacity II</A> </LI>
       
   
    <LI><A class=drop title="Hover/click with no active/focus borders" href="http://www.cssplay.co.uk/menu/hover_click.html">Administration<!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

                <UL class=left>
                  <LI><A title="Styling forms" href="http://www.cssplay.co.uk/menu/form.html">Backing up</A> </LI>
                  <LI><A title="Removing active/focus borders" href="http://www.cssplay.co.uk/menu/nodots.html">Uploading</A> </LI>
                  <LI><A title="Hover/click with no active/focus borders" href="http://www.cssplay.co.uk/menu/hover_click.html">Miscellaneous</A></LI>
                </UL>
               
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </LI>
   
   
   
   </UL>
   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </LI>
 
  <!-- @ --><!-- @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ END MENU ABOUT -->  
   
   
<!-- @@@@@ END OF MENU -->  
    </UL>
<!-- @@@@@ END OF MENU -->      
   
    </DIV>
   













</div>


<div id="maincontent">
<div class="innertube">

<h1>Dynamic Drive CSS Library</h1>
<p><script type="text/javascript">filltext(255)</script></p>

<p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p>

</div>
</div>


</body>
</html>
--------------------------------------------------------------------------------------------------------------------

Attachments:
 
ie-view.jpg (143 KB) (File Type Details) 
Internet Explorer View of Problem
Internet Explorer View of Problem
 
 
firefox-view.jpg (186 KB) (File Type Details) 
Firefox View of Problem
Firefox View of Problem
 
 
Related Solutions
Keywords: Vertical Menu Drop Down will not overl…
Title
1 A little issue with the vertical scrollbar i…
 
Loading Advertisement...
 
[+][-]05/05/08 07:24 AM, ID: 21500230Expert Comment

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]05/05/08 07:30 AM, ID: 21500276Accepted Solution

View this solution now by starting your 30-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

About this solution

Zones: Cascading Style Sheets (CSS), Hypertext Markup Language (HTML)
Sign Up Now!
Solution Provided By: dij8
Participating Experts: 1
Solution Grade: A
 
[+][-]05/05/08 10:31 AM, ID: 21501545Author Comment

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 30-day free trial to view this Author Comment or ask the Experts your question.

 
 
Loading Advertisement...
20091111-EE-VQP-89 / EE_QW_2_20070628