Многоуровневое выпадающее меню в HTA загружается неправильно - PullRequest
Новая
       37

Многоуровневое выпадающее меню в HTA загружается неправильно

0 голосов
/ 22 июня 2019

Я возился с приложениями 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

1 Ответ

0 голосов
/ 23 июня 2019

Это похоже на I.E. вопрос режима стандартов. Добавьте строку в разделе HEAD, чтобы заставить I.E. 11 режим: 

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

Вы можете экспериментировать с меньшими номерами версий, пока они снова не сломаются.

Упс, только что заметил ваш Edit, слишком поздно.

...