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

不要對列表項使用填充。 另外，您需要將錨標簽顯示的屬性值設置為inline-block或block。

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。它將幫助您