Question

这个纯css下拉菜单在Firefox，Chrome，Safari和Opera中运行良好，但只显示IE9中的列表。假设它在IE的旧版本中不起作用。这是我的理解IE9解决了下拉菜单中的悬停等问题。我该如何解决这个问题？谢谢。

纯CSS是：

body {
    background: ;
    font-family: Arial Black, Helvetica, sans-serif; font-size: 12px; line-height: 16px;
}

nav {
    margin: 0px auto; 
    text-align: center;
}

nav ul ul {
    display: none;
    width: 130px;
}

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


nav ul {
    background: #; 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0 10px;
    border-radius: 10px;  
    list-style: none;
    position: relative;
    display: inline-table;
}
    nav ul:after {
        content: ""; clear: both; display: block;
    }

    nav ul li {
        float: left;
    }
        nav ul li:hover {
            background: #377C37;

        }
            nav ul li:hover a {
                color: #fff;
            }

        nav ul li a {
            display: block; padding: 5px 40px;
            color: #757575; text-decoration: none;

        }


    nav ul ul {
        background: #5F6975; border-radius: 0px 0px 10px 10px; padding: 0px;
        position: absolute; top: 100%;
    }
        nav ul ul li {
            float: none; 
            border-top: 1px solid #;
            border-bottom: 0px solid #; position: relative;
            border-radius: 0px 10px 0px 0px; 
        }
            nav ul ul li a {
                padding: 3px 30px;
                color: #fff;
            }   
                nav ul ul li a:hover {
                    background: #3BA110;
                        border-radius: 0px 0px 0px 0px; 


                }

    nav ul ul ul {
        position: absolute; left: 100%; top:0;
            border-radius: 0px 10px 10px 10px; 

                }

HTML是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>GRH Multi-Level</title>
<meta name="Author" content="George R. Hozendorf" />

<link rel="stylesheet" type="text/css" href="../down_menu_lawsart.css" />

</head>
<body>

<nav>
    <ul>
        <li><a href="http://www.lawsart.com/Home.html">Home</a></li>
        <li><a href="http://www.lawsart.com/About.html">About Me</a></li>

        <li><a>Portfolios &#9660</a>
        <ul>
            <li><a>Horses &#9658</a>

        <ul>
          <li><a href="http://www.lawsart.com/Horse1.html">Horses I</a></li>
          <li><a href="http://www.lawsart.com/Horse2.html">Horses II</a></li>
          <li><a href="http://www.lawsart.com/Horse3.html">Horses III</a></li>
          <li><a href="http://www.lawsart.com/Horse4.html">Horses IV</a></li>
          <li><a href="http://www.lawsart.com/Horse5.html">Horses V</a></li>
          <li><a href="http://www.lawsart.com/Horse6.html">Horses VI</a></li>
          <li><a href="http://www.lawsart.com/Horse7.html">Horses VII</a></li>
            </ul>
            </li>

            <li><a>Dogs &#9658</a>

          <ul>
            <li><a href="http://www.lawsart.com/Dog1.html">Dogs I</a></li>
            <li><a href="http://www.lawsart.com/Dog2.html">Dogs II</a></li>
          </ul>
            </li>

            <li><a>People &#9658</a>

          <ul>
            <li><a href="http://www.lawsart.com/People1.html">People I</a></li>
            <li><a href="http://www.lawsart.com/People2.html">People II</a></li>
          </ul>
            </li>

            <li><a href="http://www.lawsart.com/Stills.html">Stills</a></li>

        </ul>
    </li>
    <li><a href="http://www.lawsart.com/Order.html">Order</a></li>
    <li><a href="http://www.lawsart.com/Contact.html">Contact Me</a></li>
  </ul>
</nav>

</body>
</html>

Answer 1

我尝试了你的代码，并使用“Modernizr Library”添加/包含你的代码一切正常。甚至使用IE8 http://modernizr.com/

<script type="text/javascript" src="modernizr.js"></script>

Example

IE8

Answer 2

我正在格式化您的代码，我意识到您错过了</ul>之前的结束</nav>。验证

Answer 3

您使用的html5元素不支持旧版本。如果你想在旧版本中支持html5元素，那么只需在你的html文件中使用跟随头部标记的js。

<script type="text/javascript">
document.createElement("nav");
</script>

IE下拉不起作用

3 个答案: