本地和在线行为不同

问题描述

我真的很挣扎。我正在使用 Adob​​e Dreamweaver 在 https://bike-activities.ch/test/ 上建立一个新网站。 在网站的桌面版中，我想要一个下拉菜单（在平板电脑和移动版上有一个汉堡菜单，几乎可以使用）。 如果我将鼠标悬停在在线版本的 dorpdown 菜单上，文本保持白色并出现菜单，背景立即再次消失（见上面的链接）。如果我在 Dreamweaver 实时预览中查看完全相同的站点，它可以工作 - 悬停将字体更改为绿色，下拉工作 - 背景颜色保持黑色，不透明度为 0.8。 知道我错过了什么吗？谢谢 罗杰

HTML 结构如下所示： 这是html菜单结构：

        <nav>
            <ul>
                <li><a href="kalender.html" >Kalender</a></li>
                <li><a href="#" >Für Kids <i class= "fas fa-angle-down"></i></a>
                    <ul class = "submenu">
                        <li><a href="minami-biken.html">Mittwoch-Nachmittags-Biken</a></li>
                        <li><a href="sicher-auf-dem-schulweg.html">Sicher auf dem Schulweg</a></li>
                        <li><a href="aktive-party.html">Aktive Kinderparty</a></li>
                    </ul>
                </li>
                <li><a href="#" >Für Ladies <i class= "fas fa-angle-down"></i></a>
                    <ul class = "submenu">
                        <li><a href="ladybike-treff.html">Lady-Bike Treff</a></li>
                        <li><a href="bikekurse.html">Bikekurse</a></li>
                        <li><a href="einsteiger-refresher.html">Velo: Einsteiger/Refresher</a></li>
                        <li><a href="private-coaching.html">Private Coaching</a></li>
                    </ul>
                </li>
                <li><a href="#" >Für Alle <i class= "fas fa-angle-down"></i></a>
                    <ul class = "submenu">
                        <li><a href="einsteiger-refresher.html">Velo: Einsteiger/Refresher</a></li>
                        <li><a href="private-coaching.html">Private Coaching</a></li>
                    </ul>
                </li>
                <li><a href="#" >Für Schulen <i class= "fas fa-angle-down"></i></a>
                    <ul class = "submenu">
                        <li><a href="geschicklichkeits-parcours.html">Geschicklichkeits-Parcours</a></li>
                        <li><a href="schul-projekte.html">Unterstützung bei Projekten</a></li>
                        <li><a href="sicher-auf-dem-schulweg.html">Sicher auf dem Schulweg</a></li>
                    </ul>
                </li>
                <li><a href="https://gallery.bike-activities.ch/Bike-Activities" target="_blank" >Gallerie</a></li>
                <li><a href="gutschein.html" >Gutschein</a></li>
            </ul>
        </nav>

这是 CSS 的移动部分（menu-wrap 是围绕菜单的容器）：

    .menu-wrap nav {
        background-color: transparent;
        padding-top: 10px;
    }
    .menu-wrap a:hover,.menu-wrap a:active {
        color: rgb(151,191,13);
        background-color: transparent;
    }
    /* define the layout of the lists */
    .menu-wrap nav > ul {
        max-height: 600px;
        list-style: none;
        display: flex;
        flex-direction: row;
        max-width: 1500px;
        text-align: left;
    }
    /* override the background for the drop-down from the mobile menu */
    .menu-wrap nav .submenu {
        text-align: left;
        position: absolute;
        min-width: 250px;
        background-color: rgba(13,9,0.8);
        visibility: hidden;
        height: 0px;
        z-index: 1000;
        max-height: none;
        display: flex;
        flex-direction: column;
    }
    /* layout of the text of the drop-down */
    .menu-wrap nav .submenu li {
        padding: 0 0px;
        display: block;
    }
    .menu-wrap nav li {
        margin: 0;
        padding: 0;
        flex: 1;
        font-size: 12pt;
    }
    .menu-wrap nav a {
        display: flex;
    }
    /* show the submenu on hover,focus */
    .menu-wrap nav li:hover .submenu,.menu-wrap nav li:active .submenu,.menu-wrap nav li:focus .submenu {
        visibility: visible;
        height: auto;
        background-color: rgba(13,0.8);
    }
    .menu-wrap nav li:focus-within .submenu {
        visibility: visible;
        height: auto;
        background-color: rgba(13,0.8);
    }

这被桌面的 CSS 覆盖：

    .menu-wrap nav {
        background-color: transparent;
        padding-top: 10px;
    }
    .menu-wrap a:hover,0.8);
    }
    /* </menu definition> */

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）