i have two iframe one for menu and other for slider both are working fine alone but when i put together two two problem occurred:
1-on hover the menu(iframe) dropdown menu goes behind the second frame.
2-on clicking on menu its goes down and header which is an image appear again in place of menu.you can say now i have two header .
iframe codes are look like this in index page:
<div >
<iframe id="menuFRM" src="menu.htm" frameborder="0" marginheight="0" style="z-index:100;overflow: hidden; <-- this
background: none repeat scroll 0% 0% transparent;" allowtransparency="true" marginwidth="0" scrolling="no" class="menu-frame menu-height" onload="this.style.visibility='visible';"></iframe>
<!-- START IMAGE BAR -->
<iframe id="sliderFRM" src="slider.htm" frameborder="0" style="z-index:1000;overflow: hidden; <-- this
background: none repeat scroll 0% 0% transparent;" marginheight="0" marginwidth="0" style="z-index:1000" scrolling="no" class="slider-frame slider-height" onload="this.style.visibility='visible';"></iframe>
</div>
here is menu iframe code:
<script src="js/jmenu.js"></script>
<script>
$(document).ready(function() {
$( '.dropdown' ).hover(
function(){
$(this).children('.sub-menu').slideDown(200);
},
function(){
$(this).children('.sub-menu').slideUp(200);
}
);
}); // end ready
</script>
<div id="wrapper">
<nav >
<ul id ="test" class="content clearfix">
<li><a href=".htm" >Home</a></li>
<li class="dropdown"><a href=".htm">About Us</a>
<ul class="sub-menu">
<li><a href=".htm">Background & History</a></li>
<li><a href=".htm">Our Mission</a></li>
<li><a href=".htm">Human Resources</a></li>
<li><a href=".htm">Affiliations</a></li>
<li><a href=".htm">Regional Presence</a></li>
</ul>
</li>
<li class="dropdown"><a href=".htm">Services</a>
<ul class="sub-menu">
<li><a href=".htm">Services Overview</a></li>
<li><a href=".htm">Our Services</a></li>
</ul>
</li>
<li class="dropdown"><a href=".htm">Solution</a>
<ul class="sub-menu">
<li><a href=".htm">Sewage Treatment Plant</a></li>
<li><a href=".htm">Water Treatment Plant</a></li>
<li><a href=".htm">Waste-water Division</a></li>
</ul>
</li>
<li class="dropdown"><a href=".htm">Quality&Environment</a>
<ul class="sub-menu">
<li><a href=".htm">Quality Statement</a></li>
<li><a href=".htm">Environmental Policy</a></li>
</ul>
</li>
<li class="dropdown"><a href=".htm">Help</a>
<ul class="sub-menu">
<li><a href=".htm">Site Map</a></li>
<li><a href=".htm">Terms & conditions</a></li>
</ul>
</li>
<li class="dropdown"><a href="careers.htm">Careers</a>
<ul class="sub-menu">
<li><a href=".htm">Carrer @ Aquatrisys</a></li>
<li><a href=".htm">Job Opportunities</a></li>
</ul>
</li>
<li><a href=".htm">Contact</a></li>
</ul>
</nav>
here is the css for menu:
ol, ul {
list-style: none;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color:rgb(176 224 230);
color:rgb(50,50,50);
font-family: 'Ubuntu', sans-serif;
font-weight:300;
font-size:12px;
line-height:1.5;
}
a {
text-decoration:none;
color:rgb(100,150,200);
}
a:hover {
color:rgb(50,50,50);
}
#wrapper {
width:100%;
position:relative;
margin:0 1px;
}
#main {
background-color:#B0E0E6;
padding:0px 0;
}
#test li ul
{
height: auto;
left: -999em;
margin: 0 0 0 -1px;
position: absolute;
z-index: 100;
}
/* =Top Bar */
span.all-labs,
span.back-to-tutorial {
display:block;
width:50%;
}
span.all-labs {
float:left;
text-align:left;
}
span.back-to-tutorial {
float:right;
text-align:right;
}
/* =Extras */
.clearfix:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
#wrapper {
min-width:1000px;
}
nav {
background-color:rgb(135 ,206 ,250);
padding:0px 0;
}
nav ul {
list-style-type:none;
margin:0;
padding:0;
}
nav ul li {
display:inline-block;
position:relative;
z-index: 100;
}
/* sub navigation */
nav li ul {
background-color:rgb(0 , 191 , 255);
position:absolute;
left:0;
top:40px; /* make this equal to the line-height of the links (specified below) */
width:200px;
}
nav li li {
position:relative;
margin:0;
display:block;
}
nav li li ul {
position:absolute;
top:0;
left:200px; /* make this equal to the width of the sub nav above */
margin:0;
}
/* style all links */
nav a {
line-height:40px;
padding:0 12px;
margin:0 12px;
}
nav a {
color:#fff;
text-decoration:none;
display:block;
}
nav a:hover,
nav a:focus,
nav a:active {
color:rgb(0,0,0);
background-color:rgb( 0 , 191 , 255);
}
/* style sub level links */
nav li li a {
border-bottom:solid 1px rgb(72,209,204);
margin:0 10px;
padding:0;
}
nav li li:last-child a {
border-bottom:none;
}
/* hide sub menu links */
ul.sub-menu {
display:none;
}
/* show arrows for dropdowns */
nav li.dropdown > a {
background-position:right 20px;
background-repeat:no-repeat;
}
nav li li.dropdown > a {
background-image:url('img/arrow-right.png');
background-position:right 16px;
background-repeat:no-repeat;
}
Sorry for my bad English.
Thanks in advance
Source: html