导航栏中隐藏的下拉菜单
导航栏中隐藏的下拉菜单
提问于 2015-02-13 06:34:25
我正在做一个项目，在这个项目中，我必须从头开始制作一个没有使用框架的网站。我遇到的问题是，我想做一个在移动设备上可以折叠的导航栏，以及在桌面上有一个下拉菜单。
我已经设法让它在移动设备上正常工作，但当在桌面上时，下拉菜单只是隐藏在导航栏容器中。我认为这是一个高度不能适应下拉列表的问题，但我不太确定如何解决这个问题。导航栏必须固定在顶部，当低于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>提前谢谢。
Stack Overflow用户
发布于 2015-02-13 06:51:54
很难知道所需的行为是什么，但您可以尝试以下变体：
ul.slimmenu li > ul{
position: fixed;
top: 50px;
left: none;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28489173
复制相关文章
相似问题
腾讯云开发者
