title: navigation submenu items are not appearing in an iframe
body: <p>I have 3 iframes set up.  iframe 1 is for the heading of the page; iframe 2 is for the navigation menu and submenu; iframe 3 is for the content.  I have been unable to have the submenu items in a navigation bar (resides in an iframe 2) show up.  I have the following code for any feedback on how I can over come this issue.</p>
  
  <pre><code>index.php
      &lt;DOCTYPE HTML&gt;
      &lt;HTML&gt;
           &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;   
  &lt;style&gt;
  
  #headingiframe {
  position: static;
  overflow-x:hidden;
  overflow-Y:hidden;
  z-index: 1;
  }
  #contentiframe {
  position : relative;
  left:0;
  top: 0;
  z-index: 1;
  }
  
  #menuiframe {
  position: relative;
  overflow-Y:visible;
  z-index: 5;
  }
  
  &lt;/style&gt;
  
  &lt;div id="headingiframe"&gt;
   &lt;iframe width="100%" height="12%" src="header_on_screen.php" scrolling=NO &gt;         &lt;/iframe&gt;   
  &lt;/div&gt;
  
  &lt;div id="menuiframe"&gt;
  &lt;iframe width="100%" height="10%" src="show_menu.php" scrolling=NO &gt;     &lt;/iframe&gt;
  &lt;/div&gt;
  
  &lt;div id="contentiframe"&gt;
  &lt;iframe width="100%" height="70%" src="contents.php" scrolling=YES &gt; &lt;/iframe&gt;
  &lt;/div&gt;
          &lt;/head&gt;  
          &lt;/body&gt;
      &lt;/html&gt;
  
  show_menu.php
  
      &lt;DOCTYPE HTML&gt;
      &lt;HTML&gt;
           &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;   
  
  &lt;style&gt;
  #outer {
  position: relative;
  left:0;
  top: 0;
  width: 100%; 
  z-index: 3;
      overflow-Y:visible;
  }
  
  #inner{
      background: green;
      display: inline-block;
          overflow-Y:visible;
  }
  
  .cover {
      position: absolute;
      border: none;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 5;
      overflow-Y: visible;
      height:100%;
   }
  
  
  ul#menu, ul#menu ul.sub-menu {
  padding:4;
  margin: 4;
  z-index: 6;
  overflow-Y: visible;
  display: inline-block;
  }
  ul#menu li, ul#menu ul.sub-menu li {
  list-style-type: none;
  display: inline-block;
  overflow-Y: visible;
      z-index: 6;
  }
  /*Link Appearance*/
  ul#menu li a, ul#menu li ul.sub-menu li a {
  text-decoration: none;
  color: #fff;
  background: #666;
  padding: 10px;
  display: inline-block;
  overflow-Y: visible;
      z-index: 6;
  }
  /*Make the parent of sub-menu relative*/
  ul#menu li {
  position: relative;
  overflow-Y: visible;
      z-index: 6;
  }
  /*sub menu*/
  ul#menu li ul.sub-menu {
  display: none;
  position: absolute;
  top: 30px;
  left: 0;
  width: 100px;
  z-index: 6;
  overflow-Y: visible;
  }
  ul#menu li:hover ul.sub-menu {
  display:block;
  position:absolute;
  overflow-Y: visible;
  z-index:6;
  }
  
  &lt;/style&gt;
  &lt;head&gt;
  &lt;body&gt;
  
  &lt;div id="outer"&gt;
  
  &lt;div id="inner"&gt;
      &lt;div id="navMenu"&gt;    
          &lt;ul id="menu"&gt;
  
              &lt;li&gt;
                  &lt;a href="#"&gt;About&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu 2&lt;/a&gt;
                  &lt;ul class="sub-menu"&gt;
                      &lt;iframe class="cover" src="about:blank" &gt;&lt;/iframe&gt;
  
                      &lt;li&gt;
                          &lt;a href="#"&gt;Sub Menu 1&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;Sub Menu 2&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;Sub Menu 3&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;Sub Menu 4&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu 3&lt;/a&gt;
  
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu 4&lt;/a&gt;
  
                  &lt;ul class="sub-menu"&gt;
                       &lt;iframe class="cover" src="about:blank" &gt;&lt;/iframe&gt;
  
                      &lt;li&gt;
                          &lt;a href="#"&gt;Sub Menu 1&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;Sub Menu 2&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;Sub Menu 3&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;Sub Menu 4&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Menu 5&lt;/a&gt;
              &lt;/li&gt;
  
  
  
         &lt;/ul&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;/div&gt;
  
          &lt;/head&gt;  
          &lt;/body&gt;
   &lt;/html&gt;        
  
  
  
  Header_on_screen.php
  
  &lt;?php // header_on_screen.php
  
  echo &lt;&lt;&lt;_END
  
  &lt;html&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;table style="width:100%"&gt;
      &lt;TR&gt;
          &lt;TH style="color:green;text-align:center"&gt;&lt;h2&gt;iFrame Management System &lt;/h2&gt;&lt;/TH&gt;
      &lt;/TR&gt;
      &lt;TR&gt;
          &lt;TH scope="colgroup"&gt;Version 0.6 &lt;/TH&gt;
      &lt;/TR&gt;
  &lt;/table&gt;
  _END;
  
  ?&gt;      
  
  
  
   Contents.php
   &lt;?PHP  
  
  
      echo"&lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
          &lt;BR&gt; The contents iFrame is where all contents will appear.
  
  "
  
  ?&gt;
  </code></pre>