-1

我一直在寻找解决方案，但没有找到任何东西。因此我在问一个问题。下拉菜单适用于我的电脑和家里其他设备（电脑和笔记本电脑）的 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>
4

3 回答 3

3

两个原因，

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中的选择器。

检查测试链接

编辑：截图！！:)

火狐： 在此处输入图像描述

IE9： 在此处输入图像描述

如果这不正确，请解释什么是不正确的。

于 2013-06-14T04:34:56.290 回答
0

尝试将此代码用于 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;
    }
于 2013-06-14T06:50:12.060 回答
0

您的 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中复制该问题吗？

于 2013-06-14T04:31:40.707 回答