skylope
November 14, 2011, 9:07am
1
.container { width:100%; float:left; }
.container-1 { /*background:url(../images/container_1.jpg) repeat-x; */}
.container-2 {/*background:url(../images/container_2.jpg) repeat-x;*/ }
.container-3 {/*background:url(../images/container_2.jpg) repeat-x;*/ }
.row { width:100%; overflow:hidden; margin:0 auto; }
.row-1 { width:1000px; /* border-right:5px solid #f1f4ea; border-left:5px solid #f1f4ea; */ }
.row-2 { width:1000px; /* position:absolute; z-index:99999; border-right:5px solid #f1f4ea; border-left:5px solid #f1f4ea; */}
.row-3 { width:1000px; /* position:absolute; z-index:99999; border-right:5px solid #f1f4ea; border-left:5px solid #f1f4ea; */}
.blocks, .grid { float:left; }
.header { width:1000px; position:relative; z-index:6; height:152px; margin:0 auto; background-color:#dfebc1; background:url(../images/header.jpg) no-repeat; }
.nav{float:left; width:1000px; margin:0 auto; height:43px; background-color:#eee; position:relative; z-index:2; ;}
.section1{z-index:1; position:relative; float:left; width:1000px; margin:0 auto; height:300px; background-color:green; top:-10px; }
.search{ z-index:3; position:relative;background-color:#c00; float:left; width:300px; height:43px; }
.navcontainer{ z-index:4; position:relative; background-color:#dfdfdf;float:left; width:700px; height:43px; }
.myMenu {z-index:5; position:relative; float:left; height:43px;background-color:#000; width:700px; top:0; left:0; }
/***** Navigation Area *******/
.navigation {margin:0; padding:0; }
.navigation li{float:left; font:12px Arial, Helvetica, sans-serif #111; z-index:6; position:relative;}
/* styling the list current menu*/
.navigation li a:link ,.navigation li a:visited { display:block; height:21px; text-decoration:none; background-color:#ff0; padding:10px; margin:0; color:#111; }
.navigation li a:hover { background-color:#0CF; }
/* styling the sub menu item*/
.navigation li ul {position:absolute;visibility:hidden; margin:0; padding:0; left:0; top:43px;}
.navigation li ul li {display:inline; float:none;}
.navigation li ul li a:link, .navigation li ul li a:visited { background-color:#09F; width:auto; }
.navigation li ul li a:hover { background-color:#0CF; }
/* .float-top {z-index:9999; position:absolute;}*/
<!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></title>
<style type="text/css" media="Screen">
@import url("styles/style.css");
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.navigation > li').bind('mouseover', openSubMenu);
$('.navigation > li').bind('mouseout', closeSubMenu);
function openSubMenu() {
$(this).find('ul').css('visibility', 'visible'); };
function closeSubMenu() {
$(this).find('ul').css('visibility', 'hidden');
};
});
</script>
</head>
<body>
<!--header start-->
<div class="container container-1">
<div class="row row-1">
<div class="header">
this is the header
</div>
</div>
</div><!--header end-->
<!--nav start-->
<div class="container container-2">
<div class="row row-2">
<div class="nav">
<div class="search"> this is the search area </div>
<div class="navcontainer">
<div class=" display-block myMenu">
<div class="navdiv">
<ul class="navigation">
<li><a href="#">menu item 1</a></li>
<li><a href="#">menu item 2</a>
<ul >
<li><a href="#">sub item 1</a></li>
<li><a href="#">sub item 2</a></li>
<li><a href="#">sub item 3</a></li>
<li><a href="#">sub item 4</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div><!--nav end-->
<div class="container container-3">
<div class="row row-3">
<div class="display-block section1">
this is a section area
</div>
</div>
</div>
</body>
</html>
system
November 14, 2011, 9:31am
2
To get negative Z indexes to work in FF, give the body tag the following style elements:
z-index:0;
otherwise validate your page through in W3C validation.
PaulOB
November 14, 2011, 3:16pm
3
Hi,
You need to give more information when you post as it is not immediately clear to which z-index you are talking about.
After looking at the code for a while and testing I believe you are talking about the submenu not showing up which has nothing to do with the z-index anyway so you sent us in the wrong direction to start with:)
The submenu is not showing because you have hidden the overflow here:
.row {
width:100%;
overflow:hidden;
margin:0 auto;
}
You will need to remove the overflow:hidden if you want the submenu to pop out. If you were using overflow as a float clearing mechanism then you will need to use one of the other methods as far as the line that contains the nav is concerned (see CSS faq on floats).
To get negative Z indexes to work in FF, give the body tag the following style elements:
z-index:0;
Sorry to take you to task for trying to help but negative z-index were not mentioned in the post
Indeed your solution is basically meaningless and has nothing to with how negative (or positive) z-indexes are applied anyway. Finally adding “top:0; left:0; top:0;bottom:0;” is also meaningless as that is the default for a relative element anyway and specifying does nothing at all unless it was to override a previous setting.
