How to convert HTML menu to wordpress Menu

When you need to convert HTML menu to wordpress menu, this tutorial will be very helpful for you.

At first I show you the code for sample HTML menu code:

<div id="nav">
<nav class="jquery-menu clearfix">
<ul class="menu">
<li class="current active"><a href="index.html">Home</a></li>
<li class="parent"><a href="menu.html">Menu</a>
<ul>
<li><a href="menu.html">Breakfast</a></li>
<li><a href="menu.html">Lunch</a></li>

<li><a href="menu.html">Dinner</a></li>
<li><a href="menu.html">Desserts</a></li>
<li><a href="menu.html">Drinks</a></li>
</ul>
</li>
<li><a href="typography.html" >Typography</a></li>
<li><a href="blog.html">Blog</a></li>

<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>

CSS code for above HTML code is :

#nav
{
padding: 0 5px;
height: 40px;
/*float: right;*/
position: absolute;
top: 0;
right: 20px;
font-family: Helvetica, arial, sans-serif;

background: url(../images/paper.jpg);
border: 1px solid #dcd7d2;
border-top: 0;

-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-border-bottom-left-radius: 4px;
-border-bottom-right-radius: 4px;
}

#nav ul
{
z-index: 20;
}

#nav li 
{
list-style: none;
float: left;
position: relative;
margin: 0;
padding: 5px 0 40px;
}

#nav a
{
float: left;
padding: 7px 15px 11px;
min-height: 12px; /* min-height will allow an item to occupy multiple lines */
line-height: 100%;
text-decoration: none;
font-size: 1.1em;
text-shadow: 0 1px 0 #fff;
font-style: normal;

color: #241506;
}

#nav li.parent > a
{
background: url(../images/nav.png) no-repeat 50% -58px;
}

#nav li.active
{
background: url(../images/nav.png) no-repeat 50% 41px;
}

/* Second level
------------------------------------------ */

#nav li ul
{
position: absolute;
top: 40px;
left: -5px;
display: none;
padding: 10px 0 5px !important; /* Important so the slide functions don't overwrite it */

background: url(../images/paper.jpg);
border: 1px solid #dcd7d2;
border-top: 0;

-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-radius-bottomleft: 4px;
-webkit-border-radius-bottomright: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}

#nav li li
{
margin: 0;
border: 0;
padding: 0 5px;
}

#nav li li a
{
width: 140px;
display: block;
float: none;
padding: 10px;
}

#nav li li.parent > a
{
background: url(../images/nav.png) no-repeat 100% -122px;
}

/* Third level
------------------------------------------ */

#nav ul ul ul
{
top: 0;
left: 100%;
padding: 5px !important;
margin: -5px 0 0 0px;

-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

Now, need to convert this HTML menu to wordpress menu:
Step-1:               At first copy paste the below code to your functions.php file

    if ( function_exists( 'register_nav_menus' ) ) {
    register_nav_menus(
    array(
     'menu_1' => 'Menu 1',      
               
    )
    );
    }

Step-2:                  Now change the above red color code  <div id="nav">  by <div id="cssmenu">

Step-3:                 Change the blue color HTML code by

<?php wp_nav_menu( array( 'theme_location' => 'menu_1' ) ); ?>

Step-4:                 As we change the <div id="nav">  by <div id="cssmenu">, so we need to change the all  css code       #nav by   #cssmenu


below sample changed: 

#cssmenu
{
padding: 0 5px;
height: 40px;
/*float: right;*/
position: absolute;
top: 0;
right: 20px;
font-family: Helvetica, arial, sans-serif;

background: url(../images/paper.jpg);
border: 1px solid #dcd7d2;
border-top: 0;

-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-border-bottom-left-radius: 4px;
-border-bottom-right-radius: 4px;
}

#cssmenu ul
{
z-index: 20;
}

#cssmenu li 
{
list-style: none;
float: left;
position: relative;
margin: 0;
padding: 5px 0 40px;
}

#cssmenu a
{
float: left;
padding: 7px 15px 11px;
min-height: 12px; /* min-height will allow an item to occupy multiple lines */
line-height: 100%;
text-decoration: none;
font-size: 1.1em;
text-shadow: 0 1px 0 #fff;
font-style: normal;

color: #241506;
}

#cssmenu li.parent > a
{
background: url(../images/nav.png) no-repeat 50% -58px;
}

#cssmenu li.active
{
background: url(../images/nav.png) no-repeat 50% 41px;
}

/* Second level
------------------------------------------ */

#cssmenu li ul
{
position: absolute;
top: 40px;
left: -5px;
display: none;
padding: 10px 0 5px !important; /* Important so the slide functions don't overwrite it */

background: url(../images/paper.jpg);
border: 1px solid #dcd7d2;
border-top: 0;

-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-radius-bottomleft: 4px;
-webkit-border-radius-bottomright: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}

#cssmenu li li
{
margin: 0;
border: 0;
padding: 0 5px;
}

#cssmenu li li a
{
width: 140px;
display: block;
float: none;
padding: 10px;
}

#cssmenu li li.parent > a
{
background: url(../images/nav.png) no-repeat 100% -122px;
}

/* Third level
------------------------------------------ */

#cssmenu ul ul ul
{
top: 0;
left: 100%;
padding: 5px !important;
margin: -5px 0 0 0px;

-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;

}