title: Iframe z-index for Drop down menu
body: <p>I've got code for a drop down menu and my goal is to load that code via an iFrame. Unfortunately I could not figure out how to load the view elements outside of the iFrame using the Z-index. The code is as follows:</p>
  
  <pre><code> &lt;style type="text/css"&gt;
  
       /*Initialize*/
        ul#menu, ul#menu ul.sub-menu 
        {
            padding:0;
            margin: 0;
        }
  
  
        ul#menu li, ul#menu ul.sub-menu li 
        {
  
            list-style-type: none;
            display: inline-block;
        }
  
  
        /*Link Appearance*/
        ul#menu li a, ul#menu li ul.sub-menu li a 
        {
             text-decoration: none;
             color: #fff;
             background: #666;
             padding: 5px;
             display:inline-block;
        }
  
  
  
      /*Make the parent of sub-menu relative*/
  
            ul#menu li 
            {
                position: relative;
            }
  
             /*sub menu*/
            ul#menu li ul.sub-menu 
            {
  
              display:none;
              position: absolute;
              top: 30px;
              left: 0;
              width: 100px;
           }
  
            ul#menu li:hover ul.sub-menu
            {
  
                 display:block;
  
            }
  
           &lt;/style&gt;
  
  
   &lt;ul id="menu"&gt;
  
  &lt;li&gt;
      &lt;a href="#"&gt;Menu 1&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;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;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;
  
  
     I have written the code for i frame. The drop down menu is in "test.html"
  
     &lt;iframe src="test.html" width="500" height="30"&gt;&lt;/iframe&gt;
  
  
  
    so i want load this  css drop down menu in a iframe but the list view should come out of the iframe so how to do it , Please help me .
  </code></pre>