html - 如何扩展我当前的 CSS 响应式下拉导航菜单？下拉没有按预期工作

Question

目前，我有一个以这种方式工作的下拉菜单：

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

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

在这种情况下如何有效地展开下拉菜单？请帮助，将不胜感激，非常感谢提前！

Answer 1

嗨，您想要实现的下拉菜单称为响应式布局。搜索有关您找到大量信息的信息...下面的所有链接都将帮助您实现... http://www.1stwebdesigner.com/css /responsive-website-tutorial/ http://webdesignerwall.com/tutorials/responsive-design-in-3-steps http://www.hongkiat.com/blog/responsive-web-tutorials/

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