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&fg=cccccc&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>