Z-Index in IE 10 - html

Question

If you check the following website with Internet Explorer 10 the sub menus for the navigation are hidden behind the images.
I tried adjusting the z-index values, helped with Firefox/Chrome but not with IE. The code can be found here.
<style>
body {
width: 100%;
height: 100%;
margin:0;
padding:0;
background-color: #393939;
}
/*micro-clearfix by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/*/
/* For modern browsers */
.cf:before, .cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}
/*horizontal menu styles*/
nav {
background: #916A31;
height: 2.3em;
}
ul, li {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
ul {
background: #D5973C;
height: 2em;
width: 100%;
}
li {
position: relative;
}
li a {
display: block;
line-height: 2em;
padding: 0 1em;
color: white;
text-decoration: none;
}
li a:hover, .topmenu li:hover > a {
background: #916A31;
height: 2em;
padding-top: .3em;
position: relative;
top: -.3em;
border-radius: .3em .3em 0 0;
}
.current, a:hover.current, .topmenu li:hover a.current {
background: #AD9B7F;
color: #eee;
padding-top: .3em;
border-radius: .3em .3em 0 0;
position: relative;
top: -.3em;
border-bottom: .3em solid #917F63;
cursor: default;
}
/*dropdown menu styles*/
ul.submenu {
float: none;
background: #916A31;
width: auto;
height: auto;
position: absolute;
top: 2em;
left: -9000em;
/* -9000em */
z-index: 1000000;
}
ul.submenu li {
float: none;
}
.topmenu li:hover ul {
left: 0;
}
ul.submenu li a {
border-bottom: 1px solid white;
padding: .2em 1em;
white-space: nowrap;
}
ul.submenu li:last-child a {
border-bottom: none;
}
ul.submenu li a:hover {
background: #D5973C;
height: 2em;
padding-top: .2em;
top: 0;
border-radius: 0;
}
header {
width: 960px;
}
nav {
width: 960px;
clear: both;
height: 25px;
background: #0079c0;
background: -webkit-gradient(linear, left top, left bottom, from(#0584d3), to(#0666a3));
background: -moz-linear-gradient(top, #0584d3, #0666a3);
background: -ms-linear-gradient(top, #0584d3, #0666a3);
}
article {
width: 960px;
height: 600px;
background: white;
overflow: hidden;
text-align:center;
-moz-box-shadow: 0 0 20px #888;
-webkit-box-shadow: 0 0 20px#888;
box-shadow: 0 0 20px #888;
z-index:0;
}
.logo {
float: left;
width: 65%;
}
.search {
padding-top: 17px;
width: 35%;
float: right;
}
.darkbg {
width: 100%;
height: 100px;
padding-top: 20px;
background: black;
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#393939));
background: -moz-linear-gradient(top, #000, #393939);
background: -ms-linear-gradient(top, #000000, #393939);
}
footer {
width: 100%;
height: 200px;
background: black;
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#393939));
background: -moz-linear-gradient(top, #000, #393939);
background: -ms-linear-gradient(top, #000000, #393939);
}
.lightbg {
width: 100%;
background-color: #d9d9d9;
background-image:url('images/party-cartoon-wild-bunch-adventures.png');
}
input {
border: 3px solid white;
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1), 0 0 16px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1), 0 0 16px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1), 0 0 16px rgba(0, 0, 0, 0.1);
margin: 0 0 10px 0;
font-size:20px;
color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.5) url(http://patrickjamesgeorge.id.au/mb/images/magnify.png) no-repeat 3px 3px;
padding:9px 5px 5px 36px;
}
.smallBox1 {
border:0px solid;
border-radius:3px;
border-color: grey;
width: 293;
height: 260;
float: left;
margin-left:20;
background-image:url('images/a.jpg');
background-color:#cccccc;
}
.smallBox2 {
border:0px solid;
border-radius:3px;
border-color: grey;
width: 293;
height: 260;
float: left;
margin-left:20;
background-image:url('images/b.jpg');
background-color:#cccccc;
}
.smallBox3 {
border:0px solid;
border-radius:3px;
border-color: grey;
width: 293;
height: 260;
float: left;
margin-left:20;
background-image:url('images/c.jpg');
background-color:#cccccc;
}
.smallBoxText {
margin-top: 240;
background-color:white;
width: 293;
opacity:0.75;
}
</style>
<body>
<div align="center">
<div class="darkbg">
<header>
<div class="logo" align="left">
<img id="logo" src="http://patrickjamesgeorge.id.au/mb/images/MB_Logo.png" width="600" height="78" alt="Logo" />
</div>
<div class="search" align="right">
<input type="text" onBlur="if(this.value == '') { this.value = 'Search Site'; }" onFocus="if(this.value == 'Search Site') { this.value = ''; }" value="Search Site" size="20">
</div>
</header>
</div>
<div class="lightbg">
<nav class="cf">
<nav class="cf">
<ul class="topmenu">
<li>Home
</li>
<li>Offers
<ul class="submenu">
<li>Adult entertainment
</li>
<li>Pubs, Clubs & Bars
</li>
<li>Outdoor activities
</li>
<li>Tours & cruises
</li>
<li>Transport
</li>
<li>Stay at home
</li>
<li>Sport events
</li>
<li>Dude food
</li>
</ul>
</li>
<li>Register
</li>
<li>About
</li>
<li>Contact
<ul class="submenu">
<li>Customer service
</li>
<li>Register
</li>
<li>Technical support
</li>
</ul>
</li>
<li>Admin
<ul class="submenu">
<li>Edit image fader images
</li>
</ul>
</li>
</ul>
</nav>
</nav>
<article>
<div class="images">
<img src="http://patrickjamesgeorge.id.au/mb/images/1.jpg" width="960" height="300" alt="1" id="mainImage1" style="z-index:0" />
<img src="http://patrickjamesgeorge.id.au/mb/images/2.jpg" width="960" height="300" alt="2" id="mainImage2" style="z-index:0" />
<img src="http://patrickjamesgeorge.id.au/mb/images/3.jpg" width="960" height="300" alt="3" id="mainImage3" style="z-index:0" />
<img src="http://patrickjamesgeorge.id.au/mb/images/4.jpg" width="960" height="300" alt="4" id="mainImage4" style="z-index:0" />
<img src="http://patrickjamesgeorge.id.au/mb/images/5.jpg" width="960" height="300" alt="5" id="mainImage5" style="z-index:0" />
</div>
<div class="smallBox1">
<div class="smallBoxText">
<p>By nature, the background color...</p>
</div>
</div>
<div class="smallBox2">
<div class="smallBoxText">
<p>This is just some test text.</p>
</div>
</div>
<div class="smallBox3">
<div class="smallBoxText">
<p>Because all the columns are floated.</p>
</div>
</div>
</article>
</div>
</div>
<footer></footer>
</body>

Answer 1

Add this in your html:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
The page in IE is rendering in Quirk mode.

Answer 2

While using z-inde, parent div must have position:relative and child div to b position:absolute. So change your code accordingly.