Z-index and drop down menu problems...

No replies

Thu, 2009-10-01 06:08

StylusMedia

Offline

newbie

Last seen: 12 years 16 weeks ago

Timezone: GMT-4

Joined: 2009-10-01

Posts: 1

Points: 1

Ok, after I finally fixed one problem, it created another. I have a couple image elements on the page that I wanted to use absolute positioning for.

To keep everything moving together when the screen size changed, I linked these elements to a header div that had relative positioning. Perfect. Works like I wanted it to.

But now, my drop down subnav links are not clickable. I can see them, but can't click on them.

If I add a z-index: -1 to my header div, it fixes the subnav issue, but then my absolute images get pushed behind the rest of my content when I want them on top.

Can anyone give me some advice? I'm totally lost.

This is the site: YearAroundTheWorld.com

Only a couple of the subnav links have dropdown options, "North America" is one of them if you want to see what happens.

-----------

CSS:

body {
	background: #0D0D0D url(images/darkgrey-bg.jpg);
        background-attachment: fixed;	
        color: #cccccc;
	font-size: 14px;
	font-family: Arial, Tahoma, Verdana;
	margin: 0px auto 0px;
	padding: 0px;
	}
 
.body-wrapper{
	background:url(images/top-bg.gif) repeat-x 0 0;
 
}
 
 
#navwrap {
	background: #000000;
	width: 975px;
	height: 50px;
        margin: 0px auto 0px;
	padding: 0px;
	position: relative;
	}
 
 
/************************************************
*	Top     									*
************************************************/
 
#top {
	width: 975px;
	height: 15px;
	margin: 0px auto 0px;
	padding: 0px;
	overflow: hidden;
	}
 
/************************************************
*	Header  									*
************************************************/
 
#header {
	width: 975px;	
	margin: 0px auto 0px;
	padding: 0px;
	position: relative;
	}
 
#header #imageheader {
	background: url(<a href="http://yeararoundtheworld.com/images/logo.png" rel="nofollow">http://yeararoundtheworld.com/images/logo.png</a>) no-        repeat left top;
        width: 491px;
	height: 260px;
	text-indent: -10000px;
	}
 
#header #imageheader a {	
	display: block;
	width: 491px;
	height: 260px;
	}
 
#header h1, #header h1 a, #header h1 a:visited, #header h4, #header h4 a, #header h4 a:visited {
	color: #EFEDE8;
	font-size: 10px;
	font-family: Arial, Tahoma, Verdana;
	margin: 0px;
	padding: 0px;
	text-decoration: none;
	}
 
#header h1 a, #header h1 a:visited {
	color: #EFEDE8;
	font-size: 10px;
	font-family: Arial, Tahoma, Verdana;
	margin: 0px;
	padding: 0px;
	text-decoration: none;
	}
 
.headertext {
	margin: 0px;
	padding: 0px;
	}
 
.headerleft {
	width: 491px;
        height: 260px;
	margin: 0px;
	padding: 0px;
 
	}
 
 
.month {
        background:url(<a href="http://yeararoundtheworld.com/images/month.png" rel="nofollow">http://yeararoundtheworld.com/images/month.png</a>);	
	width: 150px;
        height: 163px;
        margin: 0px;
	padding: 0px;
        position: absolute;
        top: 40px; 
        right: 275px;
        z-index: 200;
	}	
 
.ethnic {	
	width: 250px;
        height: 250px;
        margin: 0px;
	padding: 0px;
        position: absolute;
        top: 30px; 
        right: -30px;
        z-index: 200;
	}	
 
 
.feedburnerlogo {
	margin: 0px;
	padding: 0px 0px 0px 0px;
        position: absolute; 
        top: 260px; 
        left: 0px;
 
	}
 
.feedburner {
	margin: 0px;
	padding: 0px 0px 0px 0px;
        position: absolute; 
        top: 260px; 
        left: 45px;
 
	}
 
.twitterlogo {
	margin: 0px;
	padding: 0px 0px 0px 0px;
        position: absolute; 
        top: 262px; 
        left: 155px;
 
	}
 
.twittercounter {
	margin: 0px;
	padding: 0px 0px 0px 0px;
        position: absolute; 
        top: 272px; 
        left: 200px;
 
	}
 
 
/************************************************
*	Navbar      								*
************************************************/
 
#navbar {
	background: url(images/nav-bg.gif);
	width: 975px;
	height: 35px;
	font-size: 14px;
	font-family: Arial, Tahoma, Verdana;      
	color: #FFFFFF;
	font-weight: bold;
	margin: 0px auto 0px;
	padding: 0px;
 
	}
 
#nav {
	margin: 0px;
	padding: 0px;
 
	}
 
#nav ul {
	float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;
 
	}
 
#nav li {
	float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;
 
	}
 
#nav li a, #nav li a:link, #nav li a:visited {
	color: #FFFFFF;
	display: block;
	font-size: 14px;
	font-family: Arial, Tahoma, Verdana;       
        margin: 10px .62em 0px .62em;
	padding:2px 6px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
	}
 
 
 
#nav li a:hover, #nav li a:active {
	text-decoration: none;
        background-color:#be4d05;
        outline:none;
	}
 
#nav li li a, #nav li li a:link, #nav li li a:visited {
	width: 150px;
	color: #222222;
	font-size: 14px;
	font-family: Arial, Tahoma, Verdana;
	float: none;
	margin: 0px;
	padding: 7px 10px 7px 10px;
	}
 
#nav li li a:hover, #nav li li a:active {
	background: #555555;
	color: #FFFFFF;
	margin: 0px;
	padding: 7px 10px 7px 10px;
	}
 
#nav li ul {
	background: #FFFFFF;
	z-index: 9999;
	position: absolute;
	left: -999em;
	height: auto;
	width: 170px;
	margin: 0px;
	padding: 0px;
	border-bottom: 1px solid #444444;
	border-left: 1px solid #444444;
	border-right: 1px solid #444444;
	}
 
#nav li li { 
	}
 
#nav li ul a { 
	width: 140px;
	}
 
#nav li ul a:hover, #nav li ul a:active { 
	}
 
#nav li ul ul {
	margin: -32px 0 0 171px;
	}
 
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
	}
 
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
	}
 
#nav li:hover, #nav li.sfhover { 
	position: static;
	}
 
/************************************************
*	SubNavbar      								*
************************************************/
 
#subnavbar {
	background: url(<a href="http://yeararoundtheworld.com/images/sub-navbar.png" rel="nofollow">http://yeararoundtheworld.com/images/sub-navbar.png</a>);
	width: 975px;
	height: 24px;
	color: #999999;
	margin: 0px auto 0px;
	padding: 0px;
        z-index: 5000;
	}
 
#subnav {
	margin: 0px;
	padding: 0px;
	}
 
#subnav ul {
	float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
 
#subnav li {
	float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
 
#subnav li a, #subnav li a:link, #subnav li a:visited {
	color: #999999;
	display: block;
	font-size: 10px;
        font-weight: bold;
        text-transform: uppercase;
       margin: 0px 10px 0px 0px;
	padding: 6px 11px 6px 11px;
	}
 
#subnav li a:hover, #subnav li a:active {
	background: #666666;
	color: #FFFFFF;
	display: block;
	text-decoration: none;
       margin: 0px 10px 0px 0px;
	padding: 6px 11px 6px 11px;
	}
 
#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
	background: #FFFFFF;
       z-index: 9999;
        color: #000000;
	width: 140px;
	float: none;
	margin: 0px;
	padding: 6px 10px 6px 10px;
	}
 
#subnav li li a:hover, #subnav li li a:active {
        background: #666666;
       z-index: 9999;
	color: #FFFFFF;
	margin: 0px;
	padding: 6px 10px 6px 10px;
	}
 
#subnav li ul {
	background: #FFFFFF;
	z-index: 9999;
	position: absolute;
	left: -999em;
	height: auto;
	width: 160px;
	margin: 0px;
	padding: 0px;
	border-bottom: 1px solid #999999;
	border-left: 1px solid #999999;
	border-right: 1px solid #999999;
	}
 
#subnav li li { 
	}
 
#subnav li ul a { 
	width: 140px;
	}
 
#subnav li ul a:hover, #subnav li ul a:active { 
	}
 
#subnav li ul ul {
	margin: -25px 0 0 166px;
	}
 
#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover1 ul ul, #subnav li.sfhover1 ul ul ul {
	left: -999em;
	}
 
#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover1 ul, #subnav li li.sfhover1 ul, #subnav li li li.sfhover1 ul {
	left: auto;
	}
 
#subnav li:hover, #subnav li.sfhover1 { 
	position: static;
	}

------------

HTML:

 <body>
<div class="body-wrapper">
 
 <div id="navwrap">
 
<div id="navbar">
 
	<ul id="nav">
		<li><a href="http://yeararoundtheworld.com/">Home</a></li>
                <li><a href="gear-guide">Gear Guide</a></li>
                <li><a href="travel-tips">Travel Tips</a></li>
                <li><a href="travel-photos">Travel Photos</a></li>
                <li><a href="travel-video">Travel Video</a></li>
                <li><a href="about">About</a></li>
                <li><a href="press">Press</a></li>
                <li><a href="travel-bloggers">Travel Bloggers</a></li>
                <li><a href="donate">Donate</a></li>
                <li><a href="contact">Contact</a></li>
	</ul>
 
</div>
 
<div class="clear"></div>
 
<div id="subnavbar">
 
	<ul id="subnav">
<?php wp_list_categories('orderby=name&title_li=&depth=2&exclude=0'); ?>
 
 
	</ul>
 
</div>
 </div>
 
 
<div id="header">
 
        <div class="headerleft" id="imageheader"> 
            <h1><a href="http://yeararoundtheworld.com/">Year Around The World | Vagabonding Travel Blog</a></h1>           <p>Travel Blog Adventures</p> 
        </div>	
 
 <div class="month"></div> 
 
 <div class="ethnic"><img src="http://yeararoundtheworld.com/images/aztec.png" title="The Aztec Calendar" width="250" height="250"></div>    
 
 
 
  <div class="feedburnerlogo">
 
    <a href="http://feeds.feedburner.com/YearAroundTheWorld"><img src="http://yeararoundtheworld.com/images/rss.png" alt="" width="39" height="41" /></a></div>
 
  <div class="feedburner">
 
    <p><a href="http://feeds.feedburner.com/YearAroundTheWorld"><img src="http://feeds.feedburner.com/~fc/YearAroundTheWorld?bg=000000&amp;fg=cccccc&amp;anim=0" height="26" width="88" style="border:0" alt="" /></a></p></div>
 
 
  <div class="twitterlogo">
 
    <a href="http://twitter.com/YearAroundWorld" target="blank"><img src="http://yeararoundtheworld.com/images/twitter.png" width="40" height="40"></a></div>
 
 
  <div class="twittercounter">
		<?php // begin code for twittercounter ?>    
            <script type="text/javascript" language="javascript" src="http://twittercounter.com/embed/?username=YearAroundWorld&style=black"></script>        
            <?php // end code  ?></div>
 
</div>
 
<div class="clear"></div>

Tags:

CSS Layouts

Z-index and drop down menu problems...

User login

Navigation