WordPress菜单样式

我在设置Wordpress菜单的样式和行为方式时遇到了一些困难。

所以我使用以下内容来显示我的菜单：

<nav>

    <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

    <br />
    <form method="get" id="search_form" action="<?php bloginfo('home'); ?>"/>
        <input type="text" class="text searchForm" name="s" value="Search" >
    </form>
</nav>

这是样式：

   nav li { 
   background-color: #99D9F3;
   margin-bottom: 2px;
   padding: 0; 
   font-weight: 300;
   }

nav a {
    color: #000;
    margin: 0;
    padding: 5px; /* you can apply padding to the anchor tags instead */
    text-decoration: none;
    display:inline-block;
    }

.sub-menu{background-color: #fff;}

.sub-menu li {
    background-color: #fff;
    margin: 5px;
    padding: 0;
    font-weight: 300;
    border-left: 2px solid white;
}
.sub-menu li:hover{
    border-left: 2px solid orange;
}
.sub-menu a{color:#aaa;}
.sub-menu a:hover{color:#000; font-weight: 500;}

除了一些事情之外，这一切都很好，只有文本是可点击的，因为我需要整个<li>是一个可点击的区域。此外，当将子项添加到菜单时，它会从它们所在的菜单项中拉伸出<li>标签，我也需要一种方法来隐藏它们，直到单击该项目然后显示子菜单项。