CSS-为什么这在Firefox/IE/Chrome中表现不同？

我有一个纯CSS多层下拉菜单（疯狂，我知道），虽然它在Firefox中工作得很好，但当我的朋友使用其他浏览器查看网站时，它有点混乱：

• Internet Explorer在下拉菜单之间添加了几个像素，因此您必须快速移动光标，否则光标将消失
• Chrome通过在每个子菜单上显示子菜单使它们无法使用

该网站是（耶，来吧！），如果你将鼠标悬停在“编程”上，然后是其中一个子菜单，例如“C++”，则会出现下拉菜单-在IE中有一个间隙，而在Chrome中，菜单不会出现在侧面，而是直接向下

有人能解释一下为什么会发生这种情况吗？我对跨浏览器兼容性或它们之间的差异完全没有经验：(

这是CSS（很抱歉有这么多！）

以及HTML：

<div id="navbar">
            <a href="/index.php" class="navbutton" id="navbuttonselected">Home</a
            ><a href="/about.htm" class="navbutton">About Me</a
            ><div id="programming"><a href="/programming.htm" class="navbutton">Programming</a>
                <div>
                    <div id="cpp"><a href="/programming/cpp.htm" class="navbutton">C++</a>
                        <div>
                            <div><a href="/programming/cpp/shooter.htm" class="navbutton navbutton2line">Shooter Game</a></div>
                            <div><a href="/programming/cpp/invoker.htm" class="navbutton navbutton2line">Invoker Practice</a></div>
                            <div><a href="/programming/cpp/gameoflife.htm" class="navbutton">Game of Life</a></div>
                        </div>
                    </div>
                    </br>
                    <div id="web"><a href="/programming/web.htm" class="navbutton navbutton2line">Web Development</a>
                        <div>
                            <div><a href="/programming/web/site.htm" class="navbutton">This Site</a></div>
                            <div><a href="/programming/web/coursework.htm" class="navbutton">Coursework</a></div>
                        </div>
                    </div>
                    </br>
                    <div id="python"><a href="/programming/python.htm" class="navbutton">Python</a>
                        <div>
                            <div><a href="/programming/python/p1.htm" class="navbutton">p1</a></div>
                            <div><a href="/programming/python/p2.htm" class="navbutton">p2</a></div>
                        </div>
                    </div>
                    </br>
                    <div id="basic"><a href="/programming/basic.htm" class="navbutton">SuperBASIC</a>
                        <div>
                            <div><a href="/programming/basic/b1.htm" class="navbutton">b1</a></div>
                            <div><a href="/programming/basic/b2.htm" class="navbutton">b2</a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

---

谢谢！

这是一个老问题，但没有人回答

我的网站有问题。当我打开网站时，它在Chrome中的行为很奇怪。但是Firefox和Safari是可以的。我解决了问题。所以想分享一下：

用于创建没有不必要的东西的CSS

尝试以匿名模式打开网站。如果其行为正常，则可以执行以下两个步骤：

禁用扩展（在chrome-更多工具-->扩展-->禁用中）。 清除浏览器历史记录（这对我很有帮助）

打开一个网站

---

希望这有帮助。快乐编码：）

如果不浏览代码，您可能需要从“规范化”之类的东西开始，以使所有浏览器呈现相同的元素。好吧，我试过使用它，但它在没有解决问题的情况下打乱了Firefox和Chrome的一些布局。好像没用(

<div id="navbar">
            <a href="/index.php" class="navbutton" id="navbuttonselected">Home</a
            ><a href="/about.htm" class="navbutton">About Me</a
            ><div id="programming"><a href="/programming.htm" class="navbutton">Programming</a>
                <div>
                    <div id="cpp"><a href="/programming/cpp.htm" class="navbutton">C++</a>
                        <div>
                            <div><a href="/programming/cpp/shooter.htm" class="navbutton navbutton2line">Shooter Game</a></div>
                            <div><a href="/programming/cpp/invoker.htm" class="navbutton navbutton2line">Invoker Practice</a></div>
                            <div><a href="/programming/cpp/gameoflife.htm" class="navbutton">Game of Life</a></div>
                        </div>
                    </div>
                    </br>
                    <div id="web"><a href="/programming/web.htm" class="navbutton navbutton2line">Web Development</a>
                        <div>
                            <div><a href="/programming/web/site.htm" class="navbutton">This Site</a></div>
                            <div><a href="/programming/web/coursework.htm" class="navbutton">Coursework</a></div>
                        </div>
                    </div>
                    </br>
                    <div id="python"><a href="/programming/python.htm" class="navbutton">Python</a>
                        <div>
                            <div><a href="/programming/python/p1.htm" class="navbutton">p1</a></div>
                            <div><a href="/programming/python/p2.htm" class="navbutton">p2</a></div>
                        </div>
                    </div>
                    </br>
                    <div id="basic"><a href="/programming/basic.htm" class="navbutton">SuperBASIC</a>
                        <div>
                            <div><a href="/programming/basic/b1.htm" class="navbutton">b1</a></div>
                            <div><a href="/programming/basic/b2.htm" class="navbutton">b2</a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>