Question

我设置了3个iframe。 iframe 1用于页面标题; iframe 2用于导航菜单和子菜单; iframe 3用于内容。我无法将导航栏中的子菜单项（位于iframe 2中）显示出来。我有以下代码可以反馈我如何解决这个问题。

index.php
    <DOCTYPE HTML>
    <HTML>
         <meta name="viewport" content="width=device-width, initial-scale=1">   
<style>

#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;
}

</style>

<div id="headingiframe">
 <iframe width="100%" height="12%" src="header_on_screen.php" scrolling=NO >         </iframe>   
</div>

<div id="menuiframe">
<iframe width="100%" height="10%" src="show_menu.php" scrolling=NO >     </iframe>
</div>

<div id="contentiframe">
<iframe width="100%" height="70%" src="contents.php" scrolling=YES > </iframe>
</div>
        </head>  
        </body>
    </html>

show_menu.php

    <DOCTYPE HTML>
    <HTML>
         <meta name="viewport" content="width=device-width, initial-scale=1">   

<style>
#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;
}

</style>
<head>
<body>

<div id="outer">

<div id="inner">
    <div id="navMenu">    
        <ul id="menu">

            <li>
                <a href="#">About</a>
            </li>
            <li><a href="#">Menu 2</a>
                <ul class="sub-menu">
                    <iframe class="cover" src="about:blank" ></iframe>

                    <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">
                     <iframe class="cover" src="about:blank" ></iframe>

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

        </head>  
        </body>
 </html>        



Header_on_screen.php

<?php // header_on_screen.php

echo <<<_END

<html>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<table style="width:100%">
    <TR>
        <TH style="color:green;text-align:center"><h2>iFrame Management System </h2></TH>
    </TR>
    <TR>
        <TH scope="colgroup">Version 0.6 </TH>
    </TR>
</table>
_END;

?>      



 Contents.php
 <?PHP  


    echo"<BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.
        <BR> The contents iFrame is where all contents will appear.

"

?>

Answer 1

使用框架或iframe以某种方式创建网页布局是非常糟糕的选择。因为它们实际上是嵌入在一个页面中的不同页面。甚至搜索引擎也算作不同的页面。在2018年，你不应该以这种方式使用iframe。

导航子菜单项未显示在iframe

1 个答案: