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。这可能是一个原因。