0

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>
3
Contributors
2
Replies
3
Views
6 Years
Discussion Span
Last Post by Arkinder
0

You're positioning everything absolutely. This removes those elements from the normal flow of the page, and therefor the z-index will not effect those elements the same way.

Regards, Arkinder

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.