将特定类设置为＆＃34; display：none＆＃34;取决于屏幕宽度

Question

我最近在一个网站上工作，需要有4个菜单项的标题，然后菜单作为4个菜单项的最终标题扩展。我尝试制作它，以便当您的设备不适合4个菜单项时，它不会显示它们，只会显示菜单。

HTML：

<!-- Header -->
            <header id="header">
                <div class="logo"><a href="index.html"><span>Placeholder</span></a></div>
                <a href="index.html#about" class="scrolly optional">About</a>
                <a href="#types" class="scrolly optional">Clients</a>
                <a href="team.html" class="optional">Team</a>
                <a href="contact.html" class="optional">Contact</a>
                <a href="#menu">Menu</a>
            </header>

        <!-- Nav -->
            <nav id="menu">
                <ul class="links">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="index.html#about">About</a></li>
                    <li><a href="#types">Clients</a></li>
                    <li><a href="contact.html">Contact</a>
                </ul>
            </nav>

CSS：

@media screen and (max-width: 730px) {
    a.optional {
        display:none;
    }
}

正如您所看到的，我尝试使用类来选择特定的链接，但它并没有按预期工作。在此先感谢您的帮助！ JSFiddle：https://jsfiddle.net/4c3cgeqx/