WordPress 菜单问题

Question

我正在制作一个 WordPress 主题，并在 .php 文件中使用默认菜单结构：

<nav id="menu" role="navigation">
         <!--  <div id="search">
             <?php get_search_form(); ?>
         </div> -->
     <?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?>
 </nav>

但是当我使用 CSS 时，我无法让元素在 nav 元素内达到 100% 的高度，我给了 80px。

这是我的 CSS：

#menu {
height: 80px;
background-color: aquamarine;
}

.menu {
height: 80px;
}

#menu ul {
margin: 0;
padding: 0;
height: 100%;
list-style-type: none;
list-style-image: none;
}

#menu li {
height: 100%;
font-weight: bold;
font-size: 1em;
float: left;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}

.menu ul li a {
height: auto;
text-decoration: none;
display: block;
padding: 30px;
color: white;
-webkit-transition: background-color 600ms ease-out;
-moz-transition: background-color 600ms ease-out;
-o-transition: background-color 600ms ease-out;
transition: background-color 600ms ease-out;
}

.menu ul li a:hover {
background: #0f5972;
}

看到顶部和底部的小边框了吗？

Answer 1

在您的 HTML 中，menu 是其 DIV 的 ID，在三个 CSS 规则中，您将其编写为一个类 - .menu 而不是 #menu。这可能是一个原因。