隱藏在導航欄中的下拉菜單

Question

我正在做一個項目，在這個項目中，我必須不使用任何框架從頭開始制作網站。 我遇到的問題是我想制作一個導航欄，該導航欄可以在移動設備上折疊，也可以在桌面上使用下拉菜單。

我設法使它在移動設備上正常工作，但是在桌面上時，下拉菜單僅隱藏在導航欄容器中。 我認為這是一個高度無法根據下拉菜單進行調整的問題，但我不太確定如何解決。 導航欄必須固定在頂部，低於900px時折疊，並且將鼠標懸停在下拉菜單上必須可見。

有問題的網站為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>

提前致謝。

Answer 1

很難知道所需的行為是什么，但是您可以嘗試以下變化：

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

Answer 2

在您的CSS中，更改.nav溢出規則。

從

overflow: auto

至

overflow: visible