Question

即使我有display: none;，我创建的子菜单也始终显示在导航中。我不确定代码中的什么不起作用

我被here帮助创建了嵌套列表。每个人提供的代码都可以使用，但是我确实将代码复制到了我的标记中，但是它不起作用。我需要发现错误的帮助。

<style>

    * {
        font-family: arial, sans-serif; 
        box-sizing: border-box;}

    html, body {
        margin: 0;
        padding: 0;
    }

    .nav {
        position:fixed; 
        top:0; 
        left:0;
        background-color: rgba(255,255,255,.8);
        border-radius: 0px;
        border: none;
        width: 100%;
        margin: 0;
        padding: 25px 0;
        flex-direction: row;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }

    .item {
        color: black;
        font-weight: bold;
        text-transform: uppercase;
    }

    .submenu {
        display: none;
        align-items: center;
        position: absolute;
        text-transform: uppercase;
        z-index: 1;
        background-color: #2F4F4F;
        color: white;
    }

    .item.has-children:hover .sub-menu {
        display: block;
        color: #2F4F4F;
    }


    .flex-container {
        display: flex;
        flex-direction: column;
        margin: 0;
        padding-top: 100px;
    }

    .flex-container > div {
        text-align: center;
        margin: 0;
        padding: 0;
    }


    ul {
        list-style: none;
        padding: 0;
    }

</style>
</head>

<nav>
    <ul class="nav">
        <li class="item">
            <a href="main.html">
                <img src="Images/Navigation/Intak Logo 25px High.png" alt="Home" />
            </a>
        </li>
        <li class="item has-children">Printing
            <ul class="sub-menu">
                <li>Labels & Stickers</li>
                <li>Banners</li>
                <li>A-Frame</li>
                <li>Menu Boards</li>
                <li>Takeout Menus</li>
                <li>Business Cards</li>
                <li>Dine-In Menus</li>
                <li>Posters</li>
                <li>Envelopes</li>
                <li>Chinese Wedding Cards</li>
                <li>Flyers</li>
                <li>Letterheads</li>
                <li>Brochures</li>
                <li>Vinyl</li>
                <li>NCR Forms</li>
                <li>Catalogues</li>
            </ul>
        </li>
        <li class="item">Graphic Design</li>
        <li class="item">Chinese Calendars</li>
        <li class="item">FAQS</li>
        <li class="item">Contact Us</li>
    </ul>
</nav>


<body>

    <div class="flex-container">

    <div><img src="Images/Printing/Dinner Menus-01.jpg" style="max-width:100%;height:auto;" alt="Banners" /></div>
    <div><img src="Images/Printing/Banner.jpg" style="max-width:100%;height:auto;" alt="Posters" /></div>
    <div><img src="Images/Printing/Banner.jpg" style="max-width:100%;height:auto;" alt="Poster" /></div>
    </div>
</body>

我希望导航在打印时放置一个子菜单。我想将其设置为行格式。但是我想我只是添加flex-direction：row;之后

Answer 1

您在CSS中输入有错字（或html，具体取决于哪个）。在html中，您有一个class="sub-menu"，但在CSS中，您指的是.submenu

即使显示也难以隐藏导航子菜单。

1 个答案: