如何扩展当前的CSS响应式下拉导航菜单？ 下拉菜单无法正常工作

Question

Currently, I have a drop down menu which works this way:

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

When you begin to resize the browser to a smartphone and/or iPad view, I only want the drop down sub menu to "push" the rest of the menu items down after expanding. Currently, the sub drop down items only appear on top of the rest of the menu items.

How do I expand the drop down menu effectively in this case? Please help, will appreciate it so much and many thanks in advance!!

Answer 1

喜的U希望实现的下降是所谓的关于该ü找到关于做吨的信息响应layout..Search ...下面的所有链接将帮助乌拉圭回合的原因.. http://www.1stwebdesigner.com/css / sensitive-website-tutorial / http://webdesignerwall.com/tutorials/sensitive-design-in-3-steps http://www.hongkiat.com/blog/sensitive-web-tutorials/

Answer 2

The main issue here is that the tag holding the drop-down menu is absolutely positioned, removing it from the document flow. This means it won't affect the positions of other elements on the page. You should use:

#colorNav li ul {
  position: relative;
}

...on the full-width responsive version if you want the drop down to 'push' other content on the page. It'll need various other CSS fixups to make it look nice.

However, you'll have more issues, as there is no 'hover' on a touch device, so you'll need to trigger the drop down another way.

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