title: Dropdown menu hidden within navbar
body: <p>i'm doing a project in which I have to make a website from scratch using no frameworks. The problem i'm having is that I'd like to make a navigation bar that can collapse down on mobile devices aswell as have a dropdown menu on a desktop.</p>
  
  <p>I've managed to get it properly working for mobile devices, but when on a desktop the dropdown menus just hide within the nav bar container. I believe this is a problem where the height isn't adjusting for the dropdown, but i'm not too sure how i'd fix it. The navigation bar has to be fixed to the top, collapse when below 900px and the dropdowns must be visible when hovering over them.</p>
  
  <p>The Website in question is 
  <a href="http://www.ico.mmu.ac.uk/13143651/webdev/" rel="nofollow">http://www.ico.mmu.ac.uk/13143651/webdev/</a></p>
  
  <p>CSS</p>
  
  <pre><code>nav {
  background-color: #b8b8b8;
  font-family: arial;
  position: fixed;
  top: 0;
  z-index:999;
  text-decoration: none;
  width: 100%;
  padding:0px;
  overflow:auto;
  margin:0px;
  clear:both;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;nav role="navigation"&gt;
  &lt;ul class="slimmenu" id="navigation"&gt;
  &lt;li&gt;
      &lt;a href="pages/courses.html"&gt;Courses&lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="pages/media.html"&gt;Digital Media&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="pages/webdev.html"&gt;Web Development&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="pages/journalism.html"&gt;Journalism&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="pages/infocomms.html"&gt;Information Communications&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;a href="pages/facilities.html"&gt;Facilities&lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="pages/society.html"&gt;Societies&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="pages/jobs.html"&gt;Jobs and Placements&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="pages/library.html"&gt;Library&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;a href="pages/manchester.html"&gt;Manchester and Student Life&lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="pages/travel.html"&gt;Travel&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="pages/attactions.html"&gt;Attractions&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="pages/night.html"&gt;Nightlife&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;a href="pages/help.html"&gt;Student Help&lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="pages/finance.html"&gt;Finance&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="pages/union.html"&gt;Student Union&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="pages/assist.html"&gt;Assistance&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  
  &lt;li&gt;&lt;a href="pages/contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Thanks in advance.</p>