Javascrip dropdown menu beening displayed behind content

HTML & CSS
1

Hi all i am having problems with my dropdown javascript menu for my navagation and its display its menu items behind my content for some reason here is my html for it


</head>

<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
function showmenu(elmnt)
{
	document.getElementById(elmnt).style.visibility="visible"
}
function hidemenu(elmnt)
{
	document.getElementById(elmnt).style.visibility="hidden"
}
</script>
<link href="style.css" rel="stylesheet" type="text/css">

<div id="container">
	<div id="header">
		<div id="hd"></div>
	</div>
    <div id="banner">
        <ul class="slideshow">
            <li class="show"><a href="http://www.google.com">
            <img src="images/s1.gif" width="960" height="262" title="Slide 1" alt="slide 1"/></a></li>
            <li><a href="http://www.yahoo.com">
            <img src="images/s2.gif" width="960" height="262" title="Slide 2" alt="Slide 2"/></a></li>
            <li><a href="http://www.msn.com">
            <img src="images/s3.gif" width="960" height="262" title="Slide 3" alt="Slide 3"/></a></li>
        </ul>
    </div>
    <div id="nav">
        <div class="naventy"><a href="index.php" class="navlink">Home</a></div>
        <div class="naventy" onmouseover="showmenu('work')" onmouseout="hidemenu('work')">
        <a href="#" class="navlink">Portfolio</a>
            <div class="menu" id="work">
            <table>
                <tr>
                    <th><a href="portfolio.php?ptype=1" class="navlink">CSS</a></th>
                </tr>
                <tr>
                    <th><a href="portfolio.php?ptype=2" class="navlink">Flash</a></th>
                </tr>
                <tr>
                    <th><a href="portfolio.php?ptype=3" class="navlink">Facebook</a></th>
                </tr>
                <tr>
                    <th><a href="portfolio.php?ptype=4" class="navlink">PHP</a></th>
                </tr>
            </table>
            </div>
        </div>
        <div class="naventy"><a href="#" class="navlink">Resume</a></div>
        <div class="naventy"><a href="contact.php" class="navlink">Contact</a></div>
    </div>

<div id="content">

    <div id="innercnt">
    	<div id="cntt">
   </div>
   </div>

</div>
<div id="news">

<div id="nw">

<H2>News</H2>

<ul id="style">

<li>July 22, 09 - Website Designed</li>
<li>October 07, 09 - Created Portfolio Page.</li>
<li>November 20, 09 - Working @ <a href="http://www.stickmenstudios.co.nz/">Stickmen Studios</a>.</li>
<li>December 11, 09 - Updated Website.</li>

</ul>

</div>

</div>

<div id="footer">

<div id="footerinfo">&copy; 2009 BC Designs</div>

</div>

</div>
</div>
</body>

</html>

a live demo of what i mean can be seen here
Why is it being displayed behind the content itself?

How can i fix this issue?

Thanks,William

2

First thing I always do is just visit a page. I surf without JS. Your page is rather broken before JS even gets started.

Turning JS on, in Firefox in Ubuntu, it’s still broken (it may look totally different in IE on Windows, is why I say this).

Not sure why you want to hide large portions of your menu from some people and all googlebots anyway, but this is very possibly a CSS issue alone. Your Javascript looks like it’s just toggling the visibility of the (table?!?) in the dropdown, and it happens to also be setting position: absolute (this could be taken out of the JS and put in CSS anyway since it’s the same on both states).

I may ask a mod to move this over to CSS since I’m pretty sure the JS isn’t actually part of the problem. I think your markup could do with some major refreshing (and get a lot leaner as a bonus) and then likely a bunch of people will advise against using JS for this at all… instead, use a standard CSS’d menu with a bit of JS sugar on top (for things like a slight hover delay to help with shakey mouse, or a fade-in/fade-out, and of course helping our good friend IE6 out). Personally my favourite way of hiding and showing stuff is to pull the thing in question off-screen with a large negative left margin as this is screen-reader-safe.

Usually the problem with menus getting behind main content is main content being position: relative and sitting over the dropdown, but that doesn’t seem to be the case exactly here. I’m not even 100% if the menu is indeed getting covered up, or if rather the set height of the nav bar is simply cutting it off?

3

Ah, I was going to take your code and play around with it to see what specifically was going on, but I see you have started outlining your boxes and got the dropdown actually appearing, which is great. The problem currently is that the dropdown is too far away from the mouse, so as you try to move the mouse down to the dropdown you’re losing :hover.

As a side note, you can also lose all the classes too, and use the element names to reduce code.


    	<ul id="nav">
              <li><a href="#" class="naventy">Home</a></li>
              <li><a href="#" class="naventy">Portfolio</a>
                <ul>
                  <li><a href="#" class="font">CSS & XHTML</a></li>
                  <li><a href="#" class="font">Javascript</a></li>
                  <li><a href="#" class="font">Flash</a></li>
                  <li><a href="#" class="font">Facebook</a></li>
                  <li><a href="#" class="font">PHP & MYSQL</a></li>
                </ul>
              </li>
              <li><a href="#" class="naventy">Contact</a></li>
              <li><a href="#" class="naventy">Resume</a></li>
            </ul>

For the “naventy” classes, those are simply #nav li {styles}.

Since everyone with the class of “font” is the sub-ul, you can start with #nav li styles and override with
#nav ul li {styles}
which specifically refers to the sub ul’s lis.

It’s a nice way to reduce code and as you know, the less code there is, the less there is to break (and easier debugging).

If you later put something position: relative on someone who’s after the menu, you may see IE still covering up the dropdown no matter what z-index you put on the subs. This is a known bug, and usually the solution is to have your z-index on the parent (so in this case, either #nav or you could also have it on one of your wrapping boxes) instead. I usually have a good z-index on my #navs for this reason.

You probably don’t even need the wrapping nav boxes either, unless you’re going to have a background image that must be wider than the menu itself.

For better control of where the dropdown goes, you can put position: relative on the parent li, so the sub ul (who is the abso-po’d child of the li) can be positioned relative to the sub li rather than the menu itself.

With the exception of a bug in IE7 they haven’t fixed, Sons of Suckerfish dropdown is a good example of code (as it gets around some other bugs like Opera), though it does miss a bug where, if you choose to use the PeterNed whatever:hover (which I see you have, and I personally prefer it as well) and don’t have the sfhover javascript, IE7 seems to need an extra “push” that’s not quite Haslayout (we never really did figure out the true cause of this issue).

So if you find IE7 not working on :hover, you can try adding this:
#nav li:hover {
visibility: visible;
}
right before:
#nav li:hover ul
{
left:0;
background-color:#000;
margin-top:40px;
float:left;
color:#ff9000;
}

The point isn’t to make something visible, but saying “visibility: visible” on an element who’s already visible seems to be a good trigger for IE7 without changing how anything looks (other triggers may change how things look, like changing background colour or making the font-weight bold, which is why I like visibility: visible).