特定的 CSS 菜单布局

Question

我正在处理一些 Web 开发问题，想知道如何在 HTML、CSS、Javascript 中实现this specific menu 布局。 当悬停在“设计”或“Hintergründe”上时，主要区域会发生变化并显示内容。我的问题是边框，当活动菜单点改变时，轮廓也会改变。因此，我会为“Design”和“Hintergründe”使用 2 个 div 容器，并在左侧、顶部和右侧（无底部）设置边框。主要区域必须是一个带有边框的 div。如何实现菜单选择和主要区域相互融合的边界缺失派对？

顺便问一下：这些 costum（细）滚动条是否可以在 HTML 中用于 div 容器？

提前谢谢 一切顺利 迈克尔

Answer 1

您单击的选项卡与内容区域具有相同的背景颜色，并具有margin-bottom:-1px 和z-index 以将其放置在内容之上。这使得背景覆盖了内容区域的边界，从而产生了您正在寻找的效果。

Answer 2

MichiMichbeck 对标签给出了很好的回答。

对于细滚动条，请尝试众多可用的 javascript/jquery 插件之一。 一个例子是：http://jscrollpane.kelvinluck.com/

您还可以在 CSS 中更改 webkit 浏览器的滚动条：http://css-tricks.com/custom-scrollbars-in-webkit/。但可能首选 javasript 解决方案。