Hi guys,
Sorry for the simple question but can anyone tell me how to make my drop down links appear above everything else on the page.
Thanks,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#header_container {
position:absolute;
left:20px;
top:20px;
width:800px;
height:82px;
z-index:1;
}
#content_container {
position:absolute;
left:20px;
top:119px;
width:800px;
height:400px;
z-index:2;
}
#footer {
position:absolute;
left:20px;
top:525px;
width:800px;
height:17px;
z-index:3;
background-color: #ec1919;
}
#logo {
position:absolute;
left:0px;
top:12px;
width:254px;
height:58px;
z-index:4;
}
#navigation {
position:absolute;
left:255px;
top:40px;
width:547px;
height:26px;
z-index:5;
}
#language_bar {
position:absolute;
left:20px;
top:103px;
width:800px;
height:12px;
z-index:6;
}
#content {
position:absolute;
left:-1px;
top:3px;
width:801px;
height:259px;
z-index:7;
}
#blurb {
position:absolute;
left:1px;
top:305px;
width:393px;
height:94px;
z-index:8;
}
#caption {
position:absolute;
left:398px;
top:312px;
width:400px;
height:98px;
z-index:9;
}
#nav{
position:relative;
left:338px;
top:48px;
width:473px;
height:16px;
z-index:20;
background:white;
}
#nav ul,
#nav ul li {
margin:0;
padding:0;
list-style:none;
z-index: 1000;
}
#nav ul li{
float:left;
display:block;
z-index: 1000;
}
#nav ul li a:link,
#nav ul li a:visited{
color:#000000;
font-size:14px;
font-weight:bold;
text-decoration:none;
padding:0 10px 0 3px;
display:block;
z-index: 1000;
}
#nav ul li a:hover{
color:#EBEFF7;
z-index: 1000;
}
#nav ul li ul li{
float:none;
display:block;
z-index: 1000;
}
#nav ul li ul li a:link,
#nav ul li ul li a:visited{
color:#444;
font-size:11px;
font-weight:bold;
text-decoration:none;
padding:0 10px;
clear:both;
border-bottom:solid 1px #DEDEDE;
z-index: 1000;
}
#nav ul li ul li a:hover{
color:#3B5998;
background:#EBEFF7;
z-index: 1000;
}
.submenu {
position: absolute;
width: 160px;
background: #FFF;
padding: 10px;
border: solid 1px #2E4B88;
border-top: none;
display: none;
line-height: 26px;
z-index: 1000;
}
img {
border:0px;
}
-->
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function nav(){
$('div#nav ul li').mouseover(function() {
$(this).find('ul:first').show();
$(this).css('zIndex', 9999);
});
$('div#nav ul li').mouseleave(function() {
$('div#nav ul li ul').hide();
});
$('div#nav ul li ul').mouseleave(function() {
$('div#nav ul li ul').hide();;
});
};
$(document).ready(function() {
nav();
});
</script>
</head>
<body>
<div id="header_container">
<div id="logo"><img src="/assets/header.png" width="800" height="57" alt="logo" /></div>
<div id="nav">
<ul>
<li><a href="#"><img src="/assets/btn_about.png" alt="about" /></a>
<ul class="submenu">
<li><a href="#">Test</a></li>
<li><a href="#">Test 2</a></li>
</ul>
</li>
<li><a href="#"><img src="/assets/btn_services.png" /></a>
<ul class="submenu">
<li><a href="#">Test</a></li>
<li><a href="#">Test 2</a></li>
</ul>
</li>
<li><a href="#"><img src="/assets/btn_news.png" alt="" /></a>
<ul class="submenu">
<li><a href="#">Test</a></li>
<li><a href="#">Test 2</a></li>
</ul>
</li>
<li><a href="#"><img src="/assets/btn_clients.png" /></a>
<ul class="submenu">
<li><a href="#">Test</a></li>
<li><a href="#">Test 2</a></li>
</ul>
</li>
<li><a href="#"><img src="/assets/btn_gallery.png" /></a>
<ul class="submenu">
<li><a href="#">Test</a></li>
<li><a href="#">Test 2</a></li>
</ul>
</li>
<li><a href="#"><img src="/assets/btn_your_photos.png" /></a>
<ul class="submenu">
<li><a href="#">Test</a></li>
<li><a href="#">Test 2</a></li>
</ul>
</li>
<li><a href="#"><img src="/assets/btn_contact.png" /></a>
<ul class="submenu">
<li><a href="#">Test</a></li>
<li><a href="#">Test 2</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="language_bar">
<div align="right"><img src="/assets/language_bar.png" width="92" height="10" alt="languages" /></div>
</div>
<div id="content_container">
<div id="content"><img src="/assets/image_1.png" alt="content" width="800" height="300" /></div>
<div id="blurb"></div>
<div id="caption">
<div align="center"><img src="/assets/tagline.png" alt="tagline" width="213" height="75" /></div>
</div>
</div>
<div id="footer"></div>
</body>
</html>