Advertisement

05.05.2008 at 02:00AM PDT, ID: 23375934
[x]
Attachment Details

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 -->        
      <