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

Answer 2

http://users.tpg.com.au/j_birch/plugins/superfish/examples/

你可以使用superfish菜单jquery ..它会帮助你

Wordpress菜单风格

2 个答案: