菜单 – 在整个菜单项下显示子菜单 – HTML / CSS

菜单项是这样的图片，带有display: inline-block; ＆ padding-right:10px将它们放在一行中

它们处于“ul / li架构”中，如下所示：

现在我正在尝试制作一个看起来像这样的子菜单： 如果你点击灯泡图片就应该发生这种情况。 所以它应该将整个页面的内容推下来并将自己设置在菜单项下。 我怎样才能做到这一点？ 我尝试了用灯泡把它放入li并尝试通过css将它送到那里。 除了Submenu在其他位置上是否可行，但也将它与主菜单联系起来？

Answer 1

我不知道你是否绝对想要使用ul li 。 如果没有，这就是我如何在没有javascript的情况下做到这一点。 我会使用隐藏复选框的标签，并使用活动状态显示/隐藏div下。 所以你可以用css轻松设置它们的样式。 这将推动内容并显示您想要的任何内容。 在这种情况下，通过向下推送内容，您的子菜单将显示在图像下方。

这是一个jsfiddle。

希望能帮助到你！

Answer 2

与上述问题相同：菜单项：

 
  
 
  
 
  
 ... 

在这之后：

 
 
submenuitem1
 
submenuitem2
 
submenuitem3
 
 
 
submenuitem1
 
submenuitem2
 
submenuitem3
 
 ... 

并通过样式表： display:none在子菜单上。 现在你可以使用jquery切换整个事情了：

 $(document).ready( function() { $("#info").click(function() { $("#infosub").toggle(1000); }); $("#foto").click(function() { $("#fotosub").toggle(1000); }); $("#security").click(function() { $("#securitysub").toggle(1000); }); }); 

to inggle（）中的1000表示隐藏或显示的速度（1000毫秒）。

对于Submenuitems的一些CSS，这一面看起来就像上面的截图 – 希望它能帮到你。

多米