Wordpress菜单样式

Question

我有一些困难，风格的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>标记，我也需要一种方法来隐藏这些项，直到单击该项目，然后显示子菜单项。

Answer 1

不要对列表项使用填充。此外，还需要将锚标记的属性值设置为内联块或块。

display:inline-block; 

/* Or just */

display:block;

见下面的内容

   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;
    }