モバイルデバイス上でHTML-navbarが折り​​畳まれないようにするにはどうすればよいですか？

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> 

これはクールで動作します。しかし、私は、このナビゲーションバーがモバイルデバイス（水平< 640px）で崩壊しないようにしたいと思っています。余分なCSSやJavaScriptでこれをどうすれば実現できますか？上記のコードはCMSによって作成されているため変更できません。私はちょうど余分なHTML、CSSまたはJSを注入することができます。少なくとも、上記のスニペットはブートストラップコードではなくクリーンなHTMLであることが判明しました。

私を助けることができますか？ without css

余分#mobileSelect {ディスプレイ付き：

種類は、余分なCSSなしで ロバート

Answer 1

に関してはなし。 }： #mobileSelect { display: none; }

余分なul {display：block！important; }： ul { display: block!important; }

それは私が願ったものです。しかし、どのように矩形の矩形を削除するには？

ありがとうございます。