使用 CSS 固定导航菜单高度

Question

我想让我的导航菜单高度固定。使用下面的 HTML 和 CSS 代码。

我正在输入 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;
}

<nav class="navigation">
      <ul class="mainmenu">
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Products</a>
          <ul class="submenu">
            <li><a href="">Tops</a></li>
            <li><a href="">Bottoms</a></li>
            <li><a href="">Footwear</a></li>
          </ul>
        </li>
        <li><a href="">Contact us</a></li>
      </ul>
    </nav>

Answer 1

您好，您应该将 body 和 html 的高度设置为 100% 目前导航正在尝试获取周围容器的高度，但尚未设置。

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

这里有一个 fiddle 来展示工作示例 fidle

使用 CSS 固定导航菜单高度

Fixed Nav Menu Height using CSS

html

css

html-lists

nav