0

この純粋な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>
4

3 に答える 3

0

私はあなたのコードをフォーマットしていて、あなた</ul>が</nav>. それを確認する

于 2013-02-26T14:07:37.643 に答える
0

古いバージョンをサポートしていない html5 要素を使用しています。つまり、古いバージョンで html5 要素をサポートする場合は、head タグを使用して html ファイルで次の js を使用するだけです。

<script type="text/javascript">
document.createElement("nav");
</script>
于 2013-05-31T07:33:57.757 に答える
0

私はあなたのコードを試してみましたが、コードに「Modernizr Library」を追加/インクルードすると、すべて正常に動作します。IE8 を使用しても http://modernizr.com/

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

例

IE8

于 2013-02-26T14:06:13.167 に答える