html - CSS下拉菜单在IE和Firefox中不起作用

我一直在寻找解决方案，却没有找到任何东西。因此，我要问一个问题。
下拉菜单可在我的计算机和其他家用设备（计算机和笔记本电脑）的Chrome中使用。 Firefox和IE中除外。

#menu {
position: absolute;
left: 50%;
bottom: 85.125%;
z-index: 100;

height: 100px;
margin-top: -200px;

width: 300px;
margin-left: -150px;
 }

 ul {
list-style-type: none;
padding: 0;
margin: 0;
 }

  ul#nav li {
background: #fff;
float: left;
  }

 ul#nav li a {
display: block;
text-decoration: none;
border-bottom: 1px solid #ccc;
color: #000;
padding: 5px 15px;
 }

 ul#nav li a:hover {
background: #aaa;
 }

 ul#nav li ul li {
float: none;
 }
 ul#nav li ul {
position: absolute;
display: none;
 }
 ul#nav li:hover ul {
display:block;
 }

 body {
margin: 0px;
padding: 0px;
  }




      <body>
        <header>
                <!-- input for header text-->
        </header>


        <div id="menu">
        <!-- input for the navigation menu -->
            <ul id="nav">
                <li><a href="hem.html" id="hem">Hem</a></li>

                <li>
                    <a href="#" id="browsers">Browsers</a>
                    <ul>
            <li><a href="chrome.html">Chrome</a></li>
            <li><a href="firefox.html">Firefox</a></li>
            <li><a href="ie.html">IE</a></li>
            <li><a href="opera.html">Opera</a></li>
                    </ul>
                </li>

            <li><a href="data.html" id="data"> Data</a></li>
            <li><a href="synpunkt.html" id="synpunkt">Synpunkt</a></li>
            </ul>

        </div>
   </body>

最佳答案

有两个原因，

1）您的HTML出现错误，这些行-

    <li><a>href="chrome.html">Chrome</a></li>
    <li><a>href="firefox.html">Firefox</a></li>

应该

    <li><a href="chrome.html">Chrome</a></li>
    <li><a href="firefox.html">Firefox</a></li>

和

2）您的ul的ID为navbar，但是在CSS中，您使用#nav作为选择器。因此，请更改ID或更改CSS中的选择器。

检查Test Link

编辑：屏幕截图！ :)

Firefox：

IE9：

如果这不正确，请说明不正确的地方。

关于html - CSS下拉菜单在IE和Firefox中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17101061/