Question

目前，我有一个下拉菜单，可以这样工作：

http://www.feimediasolutions.com/NRA_Website/index_test_menu.html

当您开始将浏览器调整为智能手机和/或iPad视图时，我只希望下拉子菜单在展开后“推”其余菜单项。目前，子下拉项目仅显示在其余菜单项的顶部。

在这种情况下，如何有效地展开下拉菜单？请帮助，非常感谢，并提前多多感谢!!

Answer 1

嗨你想要实现的下拉菜单被称为响应式布局。搜索关于你发现大量关于这样做的信息......下面的所有链接都会帮助你... http://www.1stwebdesigner.com/css/responsive-website-tutorial/ {{3 }} http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

Answer 2

这里的主要问题是持有下拉菜单的标签是绝对定位的，将其从文档流中删除。这意味着它不会影响页面上其他元素的位置。你应该使用：

#colorNav li ul {
  position: relative;
}

如果您希望下拉菜单“推送”页面上的其他内容，请在全宽响应版本上

....它需要各种其他CSS修正才能让它看起来不错。

但是，您会遇到更多问题，因为触摸设备上没有“悬停”，因此您需要以另一种方式触发下拉。

Answer 3

@media screen and (max-width: 768px) {
  #colorNav li ul{
    position: relative;
    list-style:none;
    text-align:center;
    /*width:180px;*/
    width: 100%;
    left: -40px;
    top: 45px;
    /*left:50%;
    margin-left:-90px;
    top:70px;*/
    font-family: 'Lato', sans-serif;
    max-height:0px;
    overflow:hidden;

    -webkit-transition:max-height 0.4s linear;
    -moz-transition:max-height 0.4s linear;
    transition:max-height 0.4s linear;
  }
}

如何扩展当前的css响应下拉导航菜单？下拉不按预期工作

3 个答案: