Wordpress Nav with custom submenu styling

I've to setup a rather weird Navigation system for a Wordpress powered site. Here is the sample code;

<nav>
    <ul>
        <li><a href="">Parent Menu</a>
        <div class="dropdown">
            <div class="inner-menu-item">
                <dl>
                    <dt>Title tag for the sub-menus below</dt>
                    <dd><a href="">One</a></dd>
                    <dd><a href="">Two</a></dd>
                    &l开发者_开发知识库t;dd><a href="">Three</a></dd>

                    <dt>Title tag for another sub-menu</dt>
                    <dd><a href="">One</a></dd>
                    <dd><a href="">Two</a></dd>
                    <dd><a href="">Three</a></dd>
                </dl>
            </div>
        </div>
        </li>

        <!-- similar structure as above -->
        <li><a href="">Parent Menu</a>
        <div class="dropdown">
            <div class="inner-menu-item">
                <dl>
                    <dt>Title tag for the sub-menus below</dt>
                    <dd><a href="">One</a></dd>
                    <dd><a href="">Two</a></dd>
                    <dd><a href="">Three</a></dd>

                    <dt>Title tag for another sub-menu</dt>
                    <dd><a href="">One</a></dd>
                    <dd><a href="">Two</a></dd>
                    <dd><a href="">Three</a></dd>
                </dl>
            </div>
        </div>
        </li>
    </ul>
</nav>

What should be the best approach to write a Wordpress Nav code for the above setup? It will be awesome if I can have the option to exclude some menu items too.

I'm OK with alternative methods where I have to change the CSS, I'm pretty comfortable with that. For instance wrapping inside multiple UL > LI instead of the DIV and DL > DD.

1. Use [wp_nav_menu]1 function to generate a menu. Using it will save you pretty much efforts and is supposed to be good practice in wordpress.

2. You'll have a structure pretty much like this:

   <div id="menu-wrapper">
     <ul id="menu">
       <li id="menu-item-1">
         <a href="your-page-1">Title</a>
         <ul class="sub-menu">
          <li><a href="some-other-page">Title 2</a></li>
          <li><a href="some-other-page">Title 2</a></li>
         </ul>
      </li>
    </ul>
   </div>
   

3. You can customize this structure by inheriting Walker_Nav_Menu and passing your new class instance to wp_nav_menu.

It's simple. Use WP menu and then assign class to the menu which has just title. Set the location to # and change cursor type for that class using CSS.

Also, div classes can be taken out and CSS properties can be given to Ul and LI inside first UL LI

IMHO the markup you have listed doesn't sound to be semantic. Instead of this you can use ul/li. Think of this from a search engine point of view, removing the CSS using web developer toolbar. You may further refer to w3c. I am writing as you have rights to modify the markup.

Wordpress is having menus option under the appearance tab, you can use that to setup herarchy. It will give you an unordered list. All that remains now is doing the CSS work.

Here is a great link that will help you get the CSS correct. Take a look at this for help on CSS.