带有响应式导航菜单的Chrome错误

Question

I've been working on a responsive menu which works fine for the most part. I tried it in my phone and my desktop with both chrome and mozilla. But it gets buggy in Chrome.

only the first menu item can be clicked when you resize chrome and get the smaller menu for smaller viewports.

This bug is not present in mozilla for desktop nor mozilla for android. However it is present in both Chrome for desktops and mobiles.

if you run this jsfiddle in mozilla you will see it working well http://jsfiddle.net/LNh3e/ I can't say the same for chrome because it's not working as expected.

Usually this type of errors are shown because of a unclosed tag but I can't find one:

                       <nav>
                            <ul>
                                <li><a href="index.php">Home</a></li>
                                <li><a href="about.php">About</a></li>
                                <li><a href="portfolio.php">Portfolio</a></li>
                                <li><a href="contact.php">Contact</a></li>
                                <li><a href="services.php">Services</a></li>
                            </ul>

                        </nav>

In order to get the smaller viewport, resize the window yo 770px or lower

I dont know why this bug is showing up. Your help is greatly appreciated.

Answer 1

It appears to be a stacking problem. Defining a z-index for #main_menu fixes it.

#main_menu {
    ....
    position: relative;
    z-index: 1;
}

Fiddle: http://jsfiddle.net/marionebl/LNh3e/4/