title: Why does my css drop down menu get cut off at the bottom?
body: <p>JSFiddle here: <a href="http://jsfiddle.net/8frfH/2/" rel="nofollow">http://jsfiddle.net/8frfH/2/</a></p>
  
  <p>Like the title says, why does the drop down menu get cut off? Is it because of a mix of different positions, or because of the content/divs under the menu? This happens when you try to use the list items in the dropdown menu, in Chrome/FF/IE.</p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;body&gt;
          &lt;h1 id="site_title"&gt;Frontrunners&lt;/h1&gt;
          &lt;div id="main"&gt;
  
              &lt;div id="wrapper"&gt; &lt;!-- DENNE GÅR RUNDT HELE HEADER. UNØDVENDIG IFT. &lt;HEADER&gt;? --&gt;
                  &lt;img src="http://i.imgur.com/vilDvFB.jpg" alt="Bakgrundsbilde"&gt;
                  &lt;header&gt;
                  &lt;/header&gt;                   
  
                  &lt;nav id="meny" role="navigation"&gt;
  
                      &lt;ul&gt;
                          &lt;li id="hjem"&gt;&lt;a href="index.php?&amp;amp;title=Frontrunners%20-%20Training%20program%20for%20everyone"&gt;Hjem&lt;/a&gt;&lt;/li&gt;
  
                          &lt;li id="maraton"&gt;Maraton
  
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="index.php?page=2&amp;amp;title=Introduksjon%20til%20programmet"&gt;Introduksjon&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="index.php?page=3&amp;amp;title=Reglene%20for%20FIRST-programmet"&gt;Reglene&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="index.php?page=4&amp;amp;title=Treningsprogrammet%20for%20%20ditt%20første%20maraton"&gt;Treningsprogram&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
  
                          &lt;/li&gt;
  
                          &lt;li id="filosofier"&gt;Filosofier
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="index.php?page=5&amp;amp;title=Tempotrening%20kontra%20Pulstrening"&gt;Tempo vs Puls&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="index.php?page=6&amp;amp;title=Generelt%20om%20kosthold%20fra%20Olympiatoppen"&gt;Råd fra Olympiatoppen&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;                  
                          &lt;/li&gt;
  
                          &lt;li id="utstyr"&gt;Utstyr
  
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="index.php?page=7&amp;amp;title=Minimalisme%20-%20Bare%20foot%20running"&gt;Minimalisme&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;Utstyr 2&lt;/li&gt;
                                  &lt;li&gt;Utstyr 3&lt;/li&gt;
                              &lt;/ul&gt;
  
                          &lt;/li&gt;
                          &lt;li id="om"&gt;Om
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="index.php?page=8&amp;amp;title=Frontrunners%20-%20Kontakt%20oss"&gt;Kontakt oss&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
  
                  &lt;/nav&gt;
  
              &lt;/div&gt;
  
              &lt;div id="wrapperinnhold"&gt;
  
              &lt;div id="innhold"&gt; &lt;!-- MULIG WRAPPER FOR ALT INNHOLD UTENOM HEADER OG FOOTER --&gt;
  
  &lt;div id="kolonne1"&gt;
  &lt;/div&gt;
  &lt;div id="kolonne2"&gt;
  
  &lt;article&gt;
  
      &lt;h2&gt;Idéen&lt;/h2&gt;
      &lt;p&gt;
          Alle som driver med sport ønsker å gjøre det best mulig. Kanskje man ikke føler seg drevet av denne tanken, men kan man gjøre noen endringer i teknikk, utstyr, treningsrutiner eller på andre måter endre det man har gjort, uten at det koster for mye, så velger mange å prøve det.
  
          Denne websiden har tatt som mål av seg å presentere en del aspekter ved trening, kosthold og tilhørende emner som kan være interessante for dem som ønsker å få noen nye ideer og inputs i forhold til sin egen trening.&lt;/p&gt;
  
      &lt;p&gt;
          Vi har tatt utgangspunkt i FIRST maratonprogrammet, samt funnet frem en del kalkulatorer og verktøy for å sitt anbefalte treningstempo, treningssoner og konvertering av miles til kilometer blant annet.&lt;/p&gt;
      &lt;h2&gt;Hvordan bruke siden&lt;/h2&gt;
      &lt;p&gt;
          Vi har i tillegg til å presentere tekst og informasjon vedrørende trening og omliggende temaer valgt å gi deg som besøkende en rekke verktøy for å hjelpe å beregne paramterene for nettopp deg, slik at du også kan følge disse planene og programmene for en       mer effektiv og god trening frem mot maraton.
      &lt;/p&gt;
  
      &lt;/article&gt;
  
      &lt;/div&gt;         
      &lt;div id="kolonne3"&gt;
  
      &lt;/div&gt;  
  
      &lt;div id="aside_right_wrapper"&gt;
  
      &lt;div id="aside_sitat_wrapper"&gt;
          &lt;?php
          include './php/quoteGenerator.php';
          getRandomQuote();
          ?&gt;
      &lt;/div&gt;
  
  
      &lt;div id="aside_forslag"&gt;
          &lt;?php
          include "./php/newsGenerator.php";
          getRandomArticlePreviews();
          ?&gt;
      &lt;/div&gt;
  
      &lt;/div&gt;
  
  
  
  
  
      &lt;footer role="contentinfo"&gt;
      &lt;!--&lt;img src="./img/footer.png" alt="Footer-bilde av en løpende dame"&gt;--&gt;
      &lt;/footer&gt;
      &lt;/div&gt; &lt;!-- WRAPPER INNHOLD --&gt;
      &lt;/div&gt;  
      &lt;/div&gt;  &lt;!--MULIGENS DIV KOLONNER --&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@media screen and (min-width: 481px){
  
  body {
          margin: 0;
          padding: 0;
          font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; 
      }
  
      #site_title{
          /*Denne er for å sette en skjult h1 for WCAG validering*/
          display: none;
      }
  
      #main {
          background-image:url('../img/footer.png');
          background-repeat: no-repeat;
          background-size: 100%;
          background-position: bottom;
          position: absolute;
      }
  
      #main_kalk {
          width: 100%;
          background-image:url('../img/footer_kalk.png');
          background-repeat: no-repeat;
          background-size: 100%, 40%;
          background-position: bottom, left;
          position: absolute;
      }
  
      #wrapperinnhold {
          background-image:url('../img/graphics.jpg');
          background-repeat: no-repeat;
          background-size: 40%;
          /*Kommenterer følgende på grunn av valideringsfeil (Lukas)*/
          background-position: top left;
      }
  
      #innhold {
          padding-top: 2%;
          margin-left: 7%;
      }
  
      #mobile{
          display: none;
          visibility: hidden;
      }
  
  
      p{
          padding-bottom: 20px;
      }
  
  
      h2{
          font-weight: lighter;
          color: #186000;
          background-image: url('../img/h1tag.png');
          background-repeat: no-repeat;
          padding-left: 40px;
          padding-top: 20px;
          height: 80px;
      }
  
  
      #aside_forslag h2{
          display: none;
          visibility: hidden;
      }
  
  
      #kolonner {
  
      }
  
      #kolonne1 {
          width: 160px;
          float: left;
          margin-top: 10px;
          /*margin-bottom: 10px;*/
          /*background-color: #B2E6FF;*/
          position: relative;
  
      }
      #kolonne2 {
  
          width: 470px;
          margin-left: 10px;
          margin-top: 10px;
          /*margin-bottom: 10px;*/
          float: left;
          /*background-color: #B2E6FF;*/
          position: relative;
      }
  
      #kolonne3 {   
          width: 290px;
          margin-left: 10px;
          margin-top: 10px;
          /*margin-bottom: 10px;*/
          float: right;
          /*background-color: white;*/
          position: relative;
      }
  
      /* VERKTØYMENY START */
  
      #toolsslide{
          /*    min-height: 200px;
              width: 180px;
              position: fixed;
              top: 330px;
              left: -178px;
              float: left;
              background-color: #7D5D46;
              color: white;
              background-color: white;
              opacity: 0.8;
              border-right-style: solid;
              border-top-style: solid;
              border-bottom-style: solid;
              border-width: 1px;
              padding-left: 5px;*/
  
      }
      #gjennomsiktigmeny{
          min-height: 200px;
          width: 200px;
          position: fixed;
          top: 330px;
          left: -178px;
          float: left;
          background-color: #7D5D46;
          color: white;
          /*background-color: white;*/
          opacity: 0.8;
          border-right-style: solid;
          border-top-style: solid;
          border-bottom-style: solid;
          border-width: 1px;
          padding-left: 5px;
          box-shadow: 3px 3px 10px #888888;
      }
  
      #table_tools_div{
          margin-top: 20px;
      }
  
      #table_tools{
          border-collapse: collapse;
      }
  
      #table_tools tr{
          height: 23px;
      }
  
      #table_tools_header{
          font-weight: bold;
      }
  
      #table_tools a{
          color: white;
          text-align: center;
      }
  
      #table_tools_V{
          /*Definerer den første bokstaven i side tool menyen*/
          font-size: 15px;
          font-weight: bold;
          font-style: italic;
      }
  
      .table_tools_standard{
          /*Definerer alle andre bokstaver på side menyen*/
          font-size: 15px;
          font-weight: bold;
          font-style: italic;
      }
  
      .menutools:hover {
          background: #654C39;
      }
  
      .menutools {
          width: 180px;
      }
  
      /* VERKTØYMENY SLUTT */
  
      footer {
          z-index: -1;
          /*background-image:url('../img/footer.png');*/
          height: 482px;
          clear: both;
      }
      #wrapper {
          /*        background-image: url('../img/blogrunningprog2.jpg');
                  background-repeat: no-repeat;
                  background-attachment: fixed;
                  background-size: 100% 100%;*/
          position: relative;
          /*        width: 100%;
                  height: 400px;*/
          /*top: 0; KOMMENTERT UT
          left: 0; KOMMENTERT UT*/ 
          margin: 0% 0% 0% 0%;
          width: 100%;
          /*min-width: 99%; KOMMENTERT UT */
  
      }
  
      #wrapper img{
          /*position: relative; KOMMENTERT UT*/
          width: 100%;
      }
  
      header {
          position: relative; /* ENDRET TIL RELATIVE FRA ABSOLUTE */
          top: 0;
      }
  
      nav {
          position: absolute;
          bottom: 0;
          text-align: center;
      } 
  
      #gjennomsiktigmeny a{
          text-decoration: none;
      }
  
      #meny {
          width: 100%;
          padding-bottom: 10px;
          font-weight: lighter;
      }   
  
      #meny a{
          font-weight: lighter;
      }
  
      #meny ul {
          /*display: inline-block;*/
          margin: 0% 0% 0% 0%;
          list-style: none;
          padding-left: 0px;
  
      }
  
      #meny li {
          display: inline-block;
          /*background: #FFF;*/
          /*width: 20%; */
          padding: 3px 70px 0px 30px;
          color: #FFF;
          font-size: 20px;
          position: relative;
          /*text-align: center;*/
  
          -webkit-transition: all 0.2s;
          -moz-transition: all 0.2s;
          -ms-transition: all 0.2s;
          -o-transition: all 0.2s;
          transition: all 0.2s;
      }
  
      #meny ul li a:link {
          color: #FFF;
          text-decoration: none;
          display: block;
      }
  
      #meny ul li a:visited {
          color: #FFF;
          text-decoration: none;
      }
  
      #meny ul li:hover {
          /*color: #fff;*/
  
      }
  
      #meny ul li ul {
          padding: 0;
          position: absolute;
          display: none;
          opacity: 0;
          visibility: hidden;
  
          width: 150px;
          left: 0;
          top: 33px;
  
          -webkit-transiton: opacity 0.2s;
          -moz-transition: opacity 0.2s;
          -ms-transition: opacity 0.2s;
          -o-transition: opacity 0.2s;
          -transition: opacity 0.2s;
      }
  
      #meny ul li ul li { 
          margin-left: 0px;
          background: #7D5D46; 
          /*display: block; */
          color: #fff;
          width: 150px;
          /*text-shadow: 0 -1px 0 #000;*/
          font-weight: normal;
          clear: both;
      }
  
      #meny ul li ul li:hover { 
          background: #654C39; 
      }
  
      #meny ul li:hover ul {
          display: block;
          opacity: 1;
          visibility: visible;
      }
  
      #headerbottom {
  
      }
  
      .vertlinjeh {
          border-color: #D7D7D7;
          border-right-style: solid;
          border-width: 1px;
      }
  
      .vertlinjev {
          border-color: #D7D7D7;
          border-left-style: solid;
          border-width: 1px;
      }
  
      .horilinje {
          border-color: #D7D7D7;
          border-bottom-style: solid;
          border-width: 1px;
      }
      /*#bakgrunn_hoyre{
  
      }*/
  
  
      /*Konfigurasjon av aside elementer til høyre*/
      #aside_right_wrapper{
          /*Wraper for alle elementer som er plasert til høyre.*/
          float: left;
          margin-left: 40px;
          width: 260px;
          margin-top: 0px;
      }
  
      #aside_sitat_wrapper{
          /*Wrapper for all som har med sitat å gjøre*/
          width: 260px;
          height: 100px;
          /*border: 1px solid black;*/
          background-image: url('../img/quote_sign2.gif');
          background-repeat: no-repeat;
          background-position: left top;
          padding-top: 25px;
          padding-left: 10px;
          margin-bottom: 0px;
      }
  
      #div_quote{
          font-size: 14px;
          font-style: italic;
          color: #666666;
      }
  
      #div_quote_author{
          margin-top: 5px;
          font-size: 11px;
          font-style: italic;
          text-align: right;
          color: #186000;
          opacity: 0.8;
      }
  
      #aside_forslag{
          /*Her ligger alle artikkelforslag*/
      }
      .aside_art_prev_header h3{
          font-size: 17px;
          color: #009933;
          padding: 0;
          margin: 0;
          margin-bottom: 10px;
          margin-top: 20px;
      }
  
      .aside_art_prev_prgf{
          font-size: 12px;
          margin-top: 0px;
          text-align: justify;
          color: #333333;
      }
      .aside_art_prev_link{
          font-size: 12px;
          float: right;
      }
  
      /*Slutt på konfigurasjon av aside elementer*/
  }
  </code></pre>
  
  <p>Thanks for any help on this!</p>