隐藏在导航栏中的下拉菜单

Question

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.

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.

The Website in question is http://www.ico.mmu.ac.uk/13143651/webdev/

CSS

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;
}

HTML

<nav role="navigation">
<ul class="slimmenu" id="navigation">
<li>
    <a href="pages/courses.html">Courses</a>
    <ul>
        <li><a href="pages/media.html">Digital Media</a></li>
        <li><a href="pages/webdev.html">Web Development</a></li>
        <li><a href="pages/journalism.html">Journalism</a></li>
        <li><a href="pages/infocomms.html">Information Communications</a></li>
    </ul>
</li>
<li>
    <a href="pages/facilities.html">Facilities</a>
    <ul>
        <li><a href="pages/society.html">Societies</a></li>
        <li><a href="pages/jobs.html">Jobs and Placements</a></li>
        <li><a href="pages/library.html">Library</a></li>
    </ul>
</li>
<li>
    <a href="pages/manchester.html">Manchester and Student Life</a>
    <ul>
        <li><a href="pages/travel.html">Travel</a></li>
        <li><a href="pages/attactions.html">Attractions</a></li>
        <li><a href="pages/night.html">Nightlife</a></li>
    </ul>
</li>
<li>
    <a href="pages/help.html">Student Help</a>
    <ul>
        <li><a href="pages/finance.html">Finance</a></li>
        <li><a href="pages/union.html">Student Union</a></li>
        <li><a href="pages/assist.html">Assistance</a></li>
    </ul>
</li>

<li><a href="pages/contact.html">Contact</a></li>
</nav>

Thanks in advance.

Answer 1

It's hard to know what the desired behaviour is, but you can try variations on this:

ul.slimmenu li > ul{
    position: fixed; 
    top: 50px;
    left: none;
}

Answer 2

In your css, change your .nav overflow rule.

From

overflow: auto

to

overflow: visible