Website Menu Bar Drop Down

Question

I am working on a website for a client. For the menu/navigation bar, I created one for them (they were very specific) with dropdowns, but there is one problem--when you mous

Answer 1

Problem #1: Menu disappears before cursor can reach submenu.

Usually this is due to a gap between the <li> tag and the subnavigation <ul>. A gap of even one pixel will cause the navigation to disappear before the cursor can reach the submenu.

For instance, add a padding: 0 0 10px; to .nav li in your CSS, and the problem goes away.

You could also set a specific height for the <li> to cover the problem, too.

Problem #2: Menu disappears when cursor runs over the image slideshow.

As to the problem of your menu disappearing when you reach the point where your image slideshow and menu collide, that's due to a z-index problem.

You should set the .nav to have a z-index: 200 (or anything greater than 100, according to your slideshow -- I try to go overboard). This will make sure it sits above the gallery.

Answer 2

Javascript

 <script>   
    sfHover = function() {
        var sfEls = document.getElementById("navbar").getElementsByTagName("li");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" hover";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" hover\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

html Already a Member?

Login

Become a Member? Signup

• Army
• Navy
• Airforce