下拉菜单的 iframe z-index

Question

我有一个下拉菜单的代码，我的目标是通过 iFrame 加载该代码。不幸的是，我无法弄清楚如何使用 Z-index 在 iF​​rame 之外加载视图元素。代码如下：

 <style type="text/css">

     /*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;

          }

         </style>


 <ul id="menu">

<li>
    <a href="#">Menu 1</a>
</li>

<li>

   <a href="#">Menu 2</a>

    <ul class="sub-menu">
        <li>
            <a href="#">Sub Menu 1</a>
        </li>
        <li>
            <a href="#">Sub Menu 2</a>
        </li>
        <li>
            <a href="#">Sub Menu 3</a>
        </li>
        <li>
            <a href="#">Sub Menu 4</a>
        </li>
    </ul>
</li>
<li><a href="#">Menu 3</a>

</li>
<li><a href="#">Menu 4</a>

    <ul class="sub-menu">
        <li>
            <a href="#">Sub Menu 1</a>
        </li>
        <li>
            <a href="#">Sub Menu 2</a>
        </li>
        <li>
            <a href="#">Sub Menu 3</a>
        </li>
        <li>
            <a href="#">Sub Menu 4</a>
        </li>
    </ul>
</li>
<li>
    <a href="#">Menu 5</a>
</li>
 </ul>


   I have written the code for i frame. The drop down menu is in "test.html"

   <iframe src="test.html" width="500" height="30"></iframe>



  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 .

Answer 1

您的静态页面必须使用以下代码编写：

<iframe src="test.html" style="position: absolute; width: 500px; height: 100%; top: 0; bottom: 0; z-index: 1000; border: 0;"></iframe>

<div style="margin-top: 60px;">
    .... your content here ...  
</div>

Answer 2

Iframe's overflow problem

您不能从 iframe 中看到可见的溢出。此外，iframe 通常是不好的做法！

如果您想要包含文件的代码以避免将其写入您网站的每个 HTML 文件中，则有更好的 iframe 替代方案。查看server-side includes。但是，您将需要某种服务器来处理此类请求。

如果您想坚持使用纯前端的东西，请尝试使用 JavaScript 切换内容或使用 AJAX 请求在您单击导航按钮时加载新内容。

Answer 3

尝试：

<iframe seamless src="test.html"></iframe>