I have to create an extremely strange Navigation system for any Wordpress powered site. This is actually 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>
                    <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 ought to be the ultimate way to create a Wordpress Nav code for that above setup? It will likely be awesome basically can have the choice to exclude some menu products too.

I am Comfortable with alternative techniques where I must alter the CSS, I am pretty confident with that. For example wrapping inside multiple UL > LI rather than the DIV and DL > DD.

  1. Use [wp_nav_menu]1 function to develop a menu. Using you will save virtually efforts and should be sound practice in wordpress.
  2. You will have a structure virtually such as 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 are able to personalize this structure by getting Walker_Nav_Menu and passing your brand-new class instance to wp_nav_menu.

It is rather simple. Use Wordpress menu after which assign class towards the menu that has just title. Set the place to # and alter cursor type for your class using CSS.

Also, div classes could be removed and CSS qualities could be provided to Ul and LI inside first UL LI

IMHO the markup you've listed does not seem to become semantic. Rather than this you should use ul/li. Think about this from the internet search engine perspective, getting rid of the CSS using webmaster plugin. You might further make reference to w3c. I'm writing as you've privileges to change the markup.

Wordpress is getting menus option underneath the appearance tab, you should use that to create herarchy. You'll have an unordered list. Everything remains now's doing the CSS work.

Check out this link that may help you obtain the CSS correct. Have a look at this for help on CSS.