HTA 中的多级下拉菜单未正确加载

我一直在修补HTML应用程序和VBScript，我想在应用程序中创建一个多级下拉菜单。

我错过了什么吗？CSS 在 HTA 中无法正常工作吗

在此链接中尝试了示例：https://htmldog.com/examples/dropdowns3/这正是我试图让它看起来像什么

    <title>Example Dropdown</title>
<HTA:APPLICATION
  APPLICATIONNAME="Example Dropdown"
  ID="shortageEmail"
  ICON="magnify.exe"
  VERSION="1.0"/>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            font: 300 15px/1.5 "Helvetica Neue", helvetica, arial, sans-serif;
            background: #333;
            margin: 15px;
        }
        article {
            width: 600px;
            margin: 0 auto;
            background: #000;
            color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 15px 2px #666;
        }
        section {
            clear: left;
        }
        h1 {
            font-size: 45px;
            font-weight: 100;
            letter-spacing: 15px;
            text-align: center;
        }
        h1, #main_content, #dog_link {
            padding: 15px;
        }
        p {
            margin: 15px 0;
        }
        a {
            color: #06c;
        }
        #main_nav ul {
            background: white;
            float: left;
            -webkit-transition: .5s;
            transition: .5s;
        }
        #main_nav li {
            float: left;
            position: relative;
            width: 150px;
            list-style: none;
            -webkit-transition: .5s;
            transition: .5s;
        }
        #main_nav > ul > li > a, h1 {
            text-transform: uppercase;
        }
        #main_nav a {
            display: block;
            text-decoration: none;
            padding: 5px 15px;
            color: #000;
        }
        #main_nav ul ul {
            position: absolute;
            left: 0;
            top: 100%;
            visibility: hidden;
            opacity: 0;
        }
        #main_nav ul ul ul {
            left: 100%;
            top: 0;
        }
        #main_nav li:hover, #main_nav li:hover li {
            background: #ddd;
        }
        #main_nav li li:hover, #main_nav li li:hover li {
            background: #bbb;
        }
        #main_nav li li li:hover {
            background: #999;
        }
        #main_nav li:hover > ul {
            visibility: visible;
            opacity: 1;
        }
    </style>
    <!--[if lt IE 9]><script src="/r10/html5shiv.js"></script><![endif]-->
</head>
<body>
    <article>
        <h1>Tetrapods</h1>
        <nav id="main_nav">
            <ul>
                <li>
                    <a href="">Birds</a>
                    <ul>
                        <li><a href="">Ratites</a></li>
                        <li><a href="">Fowl</a></li>
                        <li><a href="">Neoaves</a></li>
                    </ul>
                </li>
                <li>
                    <a href="">Mammals</a>
                    <ul>
                        <li>
                            <a href="">Monotremes</a>
                            <ul>
                                <li><a href="">Echidnas</a></li>
                                <li><a href="">Platypus</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="">Marsupials</a>
                            <ul>
                                <li><a href="">Opossums</a></li>
                                <li><a href="">Numbats, etc.</a></li>
                                <li><a href="">Bandicoots, etc.</a></li>
                                <li><a href="">Kangaroos, koalas, wombats, etc.</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="">Placentals</a>
                            <ul>
                                <li><a href="">Primates, ungulates, etc.</a></li>
                                <li><a href="">Anteaters, sloths, etc.</a></li>
                                <li><a href="">Elephants, etc.</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="">Reptiles</a>
                    <ul>
                        <li><a href="">Lizards and snakes</a></li>
                        <li><a href="">Tortoises and turtles</a></li>
                        <li><a href="">Crocodilians</a></li>
                        <li><a href="">Tuatara</a></li>
                    </ul>
                </li>
                <li>
                    <a href="">Amphibians</a>
                    <ul>
                        <li><a href="">Frogs and toads</a></li>
                        <li><a href="">Salamanders and newts</a></li>
                        <li><a href="">Caecilians</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
        <section id="main_content">
            <p>A CSS dropdown menu example using tetrapod groups as navigation items. The "Mammals" item provides an example of a multi-level dropdown. See the HTML Dog <a href="/techniques/dropdowns/">Dropdowns tecnhique article</a> for more information.</p>
            <p>Tetrapods are a major group of animals containing those that evolved from fish and developed four limbs. They comprise the major sub-groups of amphibians, reptiles, mammals, and birds. "Tetrapod" literally means four-footed.</p>
        </section>
        <!-- Link back to HTML Dog: -->
        <p id="dog_link"><a href="http://www.htmldog.com/examples/"><img src="http://www.htmldog.com/badge1.gif" alt="HTML Dog"></a></p>
    </article>
</body>

预期：https://puu.sh/DJmWR/6da6b5b5dd.png

实际：https://puu.sh/DJmX7/cc10b87c70.png

这看起来像是IE标准模式问题。在 HEAD 部分添加一行以强制 I.E. 11 模式：

<meta http-equiv="x-ua-compatible" content="IE=11">

您可以尝试使用较低的版本号，直到它再次中断。

哎呀，刚刚发现你的编辑，太晚了。

相关内容

最新更新

热门标签：