Wordpress menu style

Question

I am having some difficulty styling the Wordpress menu and to behave how I want it to.

So I am using the following to display my menu:

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

Here is the style:

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

This is all well and good apart from a few things, only the text is clickable where as I need the whole <li> to be a clickable area. Also, when adding sub items to the menu it stretches out the <li> tag from the menu item they sit under, I need a way to hide those too until the item is clicked on and it then shows the sub menu items.

Answer 1

Don't use padding for the list items. Also you need to set the property value of your anchor tags display to inline-block or block.

display:inline-block; 

/* Or just */

display:block;

See the chnages below

   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/

You can use superfish menu jquery.. It will help you