two problems 1-menu goes behind the slide(iframe) 2-click one menu option menu goes down and header shifted

August 2, 2015 0 Comments

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 &amp; 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&amp;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 &amp; 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