使用CSS修复了导航菜单高度

Question

我想要修复导航菜单高度。使用以下HTML和CSS代码。

我放[Lx, x] = ndgrid(L1:Ld:L2, x1:d:x2); a = (x - L).^2; b = sin(a) - (n / 2); Yx = (b .* a) ./ L; 但仍然无效。

下图是我想要实现的布局。

height: 100%

html,
body {
    font-family: Arial, Helvetica, sans-serif;
}
.navigation {
    width: 300px;
}

.mainmenu,
.submenu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mainmenu a {
    display: block;
    background-color: #CCC;
    text-decoration: none;
    padding: 10px;
    color: #000;
}

.mainmenu a:hover {
    background-color: #C5C5C5;
}

.mainmenu li:hover .submenu {
    display: block;
    max-height: 200px;
}

.submenu a {
    background-color: #999;
}

.submenu a:hover {
    background-color: #666;
}

.submenu {
    overflow: hidden;
    max-height: 0;
    -webkit-transition: all 0.5s ease-out;
}

Answer 1

嗨，你应该给你的身体和html高度100％ 目前导航试图获取周围容器的高度，但未设置。

 html, body {
        font-family: Arial, Helvetica, sans-serif;
        height:100%;
    }

这是一个显示工作示例fidle

的小提琴