我在这里有一个jsfiddle- http://jsfiddle.net/jxvg7zvd/30/
这是一个非常简单的导航示例，该导航在第5个链接下带有一个大菜单。
大菜单绝对位于链接下方，并且其中的链接具有百分比宽度
我希望大菜单能够响应，因此，当窗口较小时，菜单内的链接将变窄。
因为在调整窗口大小时菜单是绝对定位的，所以它不会重新调整大小。
我怎么能有一个像这样的大型悬停菜单？
<div class="nav">
<ul class="top-nav">
<li><a href="">One</a></li>
<li><a href="">Two</a></li>
<li><a href="">Three</a></li>
<li><a href="">Four</a></li>
<li class="btn"><a href="">Five</a>
<div class="mega-nav">
<div class="block">
<ul class="block-nav">
<li><a href="">One</a></li>
<li><a href="">Two</a></li>
<li><a href="">Three</a></li>
<li><a href="">Four</a></li>
</ul>
</div>
<div class="block">
<ul class="block-nav">
<li><a href="">One</a></li>
<li><a href="">Two</a></li>
<li><a href="">Three</a></li>
<li><a href="">Four</a></li>
</ul>
</div>
<div class="block">
<ul class="block-nav">
<li><a href="">One</a></li>
<li><a href="">Two</a></li>
<li><a href="">Three</a></li>
<li><a href="">Four</a></li>
</ul>
</div>
<div class="block">
<ul class="block-nav">
<li><a href="">One</a></li>
<li><a href="">Two</a></li>
<li><a href="">Three</a></li>
<li><a href="">Four</a></li>
</ul>
</div>
<div class="block">
<ul class="block-nav">
<li><a href="">One</a></li>
<li><a href="">Two</a></li>
<li><a href="">Three</a></li>
<li><a href="">Four</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
您可以使用CSS媒体查询来做到这一点，如下所示：
@media (max-width:600px) {
.mega-nav {
width: 400px;
}
}
@media (max-width:400px) {
.mega-nav {
width: 250px;
}
}
您可能想要调整这些值，并可能添加更多媒体查询：)
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句