Question

我一直在寻找解决方案并没有找到任何东西。所以我问了一个问题。下拉菜单适用于我家电脑中的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>

Answer 1

有两个原因，

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标识为navbar，但在CSS中，您使用#nav作为选择器。因此，要么更改id，要么更改css中的选择器。

检查Test Link

编辑：截图!! ：）

火狐： enter image description here

IE9： enter image description here

如果这不正确，请解释不正确的内容。

Answer 2

您的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>

但无论如何我无法在Chrome中使用它。您能否在JSFiddle？

中复制该问题

Answer 3

尝试将此代码用于css，即按f12并确保浏览器模式和文档模式都设置为ie9。

编辑：标题应该是这样的。

<!doctype>
<html>
<head>
    <meta charset=utf-8>
    <title>Index</title>
    <link rel="stylesheet" href="css/style.css">
</head>



#menu 
     {
         position: relative;
         top: 50px;
         left: 800px;
         display: inline-block;
     }

ul 
    {


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

ul#nav li 

    {
        background: #fff;
        float: left;
        position: relative;
    }

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 

    {
        left: 3px;
        position: absolute;
        top: 29px;
        display: none;
    }

ul#nav li:hover ul {
        display:block;
    }

body 

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

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

3 个答案: