javascript - 使导航菜单响应

Question

这是我大学毕业后第一次做任何 CSS。我设法写了这支笔:

Navigation with hover effect

但是如果你调整浏览器的大小，一切都会变得一团糟。到目前为止，我只是使用bootstrap 制作网站原型(prototype)。但现在我正在尝试自己学习一些设计。

我应该如何继续解决这样的问题。

这是代码:pen

Answer 1

要解决问题，您需要将其添加到您的类(class)中

.bmenu li {
    border-right: 1px solid rgba(20, 0, 0, 0.4);
    clear: both;
    display: inline-block;//This will stop your nav from overflowing over eachother
    font-size: 20px;
    font-weight: bold;
    height: 20px;
    padding: 20px;
}

我仍然会使用媒体查询并针对每个尺寸进行调整。您可能在某些时候需要堆叠。转到 CSS-tricks.com 并查看 Chris 如何在您调整浏览器大小时进行导航。希望这会有所帮助。