菜单展开时仅需下拉菜单内容（CSS） [英] Need content below menu to be pushed down only when menu is expanded (CSS)

问题描述

这是我第一篇关于堆栈溢出的文章。我在开发响应式网站布局时遇到了一些困难。当我的浏览器窗口宽度小于400像素时，我的菜单更改为移动样式设计。

您可以在下面的扩展表格中看到这样一个例子： $ b

我想要实现的是，当我点击'菜单'折叠下面的内容应该移动到菜单下方。

另一张图片将有助于说明问题：

正如你所看到的那样，在小显示器上明显效率低下的内容之上的空白。

展开的菜单项的默认样式如下：

  {
 visibility：hidden; 
} 
  

我认为这是问题的一部分，因为列表项目在那里，但只是隐藏，但我不确定。

我对这个问题的基本性质表示歉意，因为我是一名学习者，现在只有
开始涉足高效响应设计。

任何建议都会有所帮助，

谢谢，

。

解决方案

如果您使用

  visibility：hidden; 
  

您将隐藏这些元素，但它们仍然存在，占据空间。

如果你不需要，可以使用

  display：none; 
  

This is my first post on stack overflow. I am having a bit of difficulty developing a responsive website layout. When my browser window is less than 400px wide my menu changes to a mobile style design.

You can see an example of this in its expanded form below:

What I want to achieve is that when I click 'Menu' to collapse the dropdown, the content below should move up to just below the menu.

Another image will help illustrate the problem:

As you can see there is a whitespace above the content which obviously is quite inefficient on a small display.

The menu items which expand are styled like this as default:

{
visibility: hidden;
}

I think this is part of the problem as the list items are there but just hidden but I am unsure.

I do apologize for the basic nature of the question as I am a learner and am only now beginning to dabble in efficient responsive designs.

Any suggestions would be helpful,

Thanks,

Steve.

解决方案

If you use

visibility: hidden;

you will just hide the elements, but they will still be there, occupying space.

If you don't want that, use

display: none;

这篇关于菜单展开时仅需下拉菜单内容（CSS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！