0

首先，我想为我的语法错误道歉。我的问题是我用 CSS 和 JavaScript 在 HTML 中制作了一个响应式下拉菜单，但是当我使网页小于 600 像素时，除了下拉部分之外，一切都正常。它显示了菜单的所有主要部分，这里有“Kezdőlap”、“Rajzok”、“Festmények”等。但它没有显示“Fekete-fehér grafikák”等等。所以，我的意思是ul> li> ul>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");
}
4

1 回答 1

0

您正在隐藏任何li不在列表中的第一个

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

因此，如果您希望其他lis 显示，则需要更改它。

于 2016-04-11T20:02:06.593 回答