Question

首先，我想为我的语法错误道歉。我的问题是我使用CSS和JavaScript制作了一个HTML响应式下拉菜单，但是当我将网页设置为小于600px时，除了下拉部分外，一切都正常。它显示了菜单的所有主要部分，这里有“Kezdőlap”，“Rajzok”，“Festmények”等。但它并没有显示“Fekete-fehératfefák”等所有。那么，ul＆gt; li＆gt; ul＆gt;我的意思是li部分。当它小于600px宽度时。

我必须使这段代码更好，以显示一切。所以，这是HTML部分：

<nav>
    <ul class="menu">
        <li><a href="#">Kezdőlap</a></li>
        <li>
            <a href="rajzok.html"><span>Rajzok</span></a>
            <ul class="menu">
                <li><a href="rajzok.html">Fekete-fehér grafikák</a></li>
                <li><a href="szinesrajzok.html">Színes képek</a></li>
                <li><a href="negative.html">Negatív rajzok</a></li>
            </ul>
        </li>
        <li>
            <a href="festmenyek.html"><span>Festmények</span></a>
            <ul>
                <li><a href="festmenyek.html">Fekete-fehér</a></li>
                <li><a href="szinesfestmenyek.html">Színes</a></li>
            </ul>
        </li>
        <li><a href="kapcs.html">Kapcsolat</a></li>
                <li><a href="insp.html">Inspiráció</a></li>
                <li><a href="other.html">Egyéb alkotások</a></li>
                <li class="ikon"><a href="javascript:void(0);" onclick="myFunction()">&#9776;</a></li>
    </ul>
</nav>

我有一个CSS代码（它不是完整的，但我想你可以理解我的问题），看起来像这样：

@media (max-width:600px) {
    nav li:not(:first-child) {display: none;}
    nav li.ikon {float: right; display: inline-block;}
    nav ul.kibont {position: relative;}
    nav ul.kibont li.ikon {position: absolute; right: 0; top: 0;}
    nav ul.kibont li {float: none; display: block;}
    nav ul.kibont li a {display: block; text-align: left;} 
}

和JS：

function myFunction()
{
     document.getElementsByClassName("menu")[0].classList.toggle("kibont");
}

Answer 1

您隐藏了

列表中不在列表中的第一个li

nav li:not(:first-child) {display: none;}

因此，如果您希望显示其他li，则需要更改该内容。

HTML，CSS，JS响应下拉菜单

1 个答案: