javascript - 如何防止HTML导航栏在移动设备上崩溃？

Question

请帮我。我正在使用Squarespace CMS（像Wordpress这样的Kinda），它会删除以下代码：

<div id="navBlock" role="navigation">                       
    <nav class="main-nav" data-content-field="navigation">
        <ul>
            <li class="page-collection">
            <a href="/palindrom-1/">palindrom</a>
            </li>
            <li class="blog-collection active-link">
              <a href="/">Blog</a>
            </li>
            <li class="page-collection">
              <a href="/about/">About</a>
            </li>
        </ul>

        <select id="mobileSelect" name="mobileSelect">
            <option class="mobile-select-label" value="">Navigation</option>
            <option class="page-collection" value="/palindrom-1/">palindrom</option>
            <option class="blog-collection" value="/" selected="selected">Blog</option>
            <option class="page-collection" value="/about/">About</option>
        </select>
    </nav>
</div>

太酷了，而且有效。但我非常想确保此导航栏在移动设备（水平<640像素）上不会折叠。如何使用额外的CSS或JavaScript实现此目标？我无法更改上面的代码，因为它是由CMS制作的。我只是可以注入额外的HTML，CSS或JS。至少我发现上面的代码段不是Bootstrap代码，而是干净的HTML。

你能帮助我吗？

亲切的问候
罗伯特

Answer 1

没有额外的CSS：
without css

使用额外的#mobileSelect {显示：无； }：
#mobileSelect { display: none; }

使用额外的ul {display：block！important; }：
ul { display: block!important; }

那几乎就是我的魔杖。但是，如何删除矩形？

提前致谢