title: How do I remove the scroll bar and let other elements appear on top of my <div>?
body: <p>After spedning hours perfecting my dropdown menu and then getting my main  holding all my text, the container holdding my main text is now appearing on top of everything. I want my drop down menu items to appear on top of everything else. As an asside, i made the text inside my container for the main area overflow: auto and made the container have overflow: hidden. It got rid of the bottom scroll bar but is there a way of hidding the vertical scroll bar? Here is the HTML and CSS pertaining to my particular problem.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    height: 100%;
    min-height: 100%;
  }
  body {
    margin: 0px;
  }
  #header {
    position: fixed;
    width: 100%;
    margin: 0px;
    background: rgba(67, 69, 76, 0.87);
    padding: 30px;
    text-shadow: 5px 5px 5px #000000;
    text-align: center;
    color: white;
  }
  #header h1 {
    position: center;
    padding: 0px;
    margin: 0px;
  }
  #menu-bar {
    position: fixed;
    top: 97px;
    width: 100%;
  }
  #menu-bar ul {
    width: 100%;
    background: rgba(30, 51, 74, 0.74);
    list-style: none;
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
  }
  #menu-bar ul a {
    display: block;
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-size: 12px;
    line-height: 40px;
    padding: 0 15px;
    font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  #menu-bar ul li {
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
  }
  #menu-bar ul li:hover {
    background: rgb(90, 42, 0);
  }
  #menu-bar ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: rgb(32, 42, 60);
  }
  #menu-bar ul ul li {
    float: none;
  }
  #menu-bar ul ul a {
    line-height: 120%;
    padding: 10px;
  }
  #menu-bar ul ul ul {
    top: 0;
    left: 100%
  }
  #menu-bar ul li:hover &gt; ul {
    display: block;
    background: rgb(32, 42, 60);
  }
  #section {
    background-color: grey;
    color: black;
    width: 50%;
    height: 66%;
    float: right;
    padding: 50px;
    overflow: hidden;
    position: fixed;
    top: 160px;
    right: 30%;
  }
  #scroll {
    overflow: auto;
    height: 100%;
  }
  #footer {
    position: fixed;
    z-index: 100;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgb(25, 25, 62);
    background: rgba(25, 25, 62, 0.6);
    color: white;
    text-align: center;
    padding: 5px;
  }
  strong {
    color: #FF3399;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en-US"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;
      Site Title
    &lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="style1.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="header"&gt;
      &lt;h1&gt;
        Site Header
      &lt;/h1&gt;
    &lt;/div&gt;
    &lt;!--Drop-Down Nav-bar--&gt;
    &lt;div id="menu-bar"&gt;
      &lt;ul&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;
            Home
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;
            1
          &lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;a href="#"&gt;
                1-1
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="#"&gt;
                1-2
              &lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;
            2
          &lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;a href="#"&gt;
                2-1
              &lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;
            3
          &lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;a href="#" target="_blank"&gt;
                3-1
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="#" target="_blank"&gt;
                3-2
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="#" target="_blank"&gt;
                3-3
              &lt;/a&gt;
              &lt;ul&gt;
                &lt;li&gt;
                  &lt;a href="#" target="_blank"&gt;
                    3-3-1
                  &lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a href="#" target="_blank"&gt;
                    3-3-2
                  &lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a href="#" target="_blank"&gt;
                    3-3-3
                  &lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a href="#" target="_blank"&gt;
                    3-3-4
                  &lt;/a&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;
            4
          &lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;a href="#" target="_blank"&gt;
                4-1
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="#" target="_blank"&gt;
                4-2
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="#" target="_blank"&gt;
                4-3
              &lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;!--Main text area--&gt;
    &lt;div id="section"&gt;
      &lt;div id="scroll"&gt;
        &lt;h2&gt;
          &lt;u&gt;
            Header
          &lt;/u&gt;
        &lt;/h2&gt;
        &lt;p&gt;
          Writing goes here
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>