How to Create a Custom WordPress Navigation Menu with the Code?

Well first of all you can use the menu feature in the newer WordPress.

First you want to activate the fact that you want to use this feature via your functions.php file.

// This theme uses wp_nav_menu() in two locations.  
register_nav_menus( array(  
'primary' => __( 'Primary Navigation', 'your_theme_name' ),  
'secondary' => __('Secondary Navigation', 'your_theme_name')  
) ); 

The above code defines if you have more than one menu. If you want just one menu delete the secondary. If you do this it would look something like this in your functions.php file:

// This theme uses wp_nav_menu() in two locations.  
register_nav_menus( array(  
'primary' => __( 'Primary Navigation', 'your_theme_name' )
) );

This will now give you the option to add page items via the menu option under Appearance in the back-end.

Next in your theme you will want to add this to where you want the menu to appear:

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' =>   'primary' ) ); ?>

The term “menu-header” will be the class of the div tag that the menu gets put in to. You can change this to whatever class you want the div tag to be in your theme.

Next everything else is done entirely via CSS.

/*****************************************
Style declarations for Top Menu
*****************************************/
.menu-header {
margin-right: auto;
margin-left: auto;
z-index: 10;
}

.menu-header li {
display: inline;
list-style: url(none) none;
float: left;
}

.menu-header ul {
line-height: 31px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}

.menu-header a, .menu-header a:hover {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
border:medium none;
display:block;
text-decoration:none;
}

.menu-header a, .menu-header a:visited {
color:#990000;
display:block;
padding:0 20px;
}

.menu-header a:hover, .menu-header a:active, .current_page_item a, #home .on, .menu-footer a:hover {
text-decoration:underline;
}

.menu-header li ul {
height:auto;
left:-999em;
line-height:30px;
margin:0;
padding:0;
position:absolute;
width:222px;
}

.menu-header li li {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
width:220px;
}

.menu-header li li a, .menu-header li li a:visited {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#1E1F21;
color:#FFFFFF;
font-size:0.9em;
font-weight:normal;
}

.menu-header li li a:hover, .menu-header li li a:active {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#60625C none repeat scroll 0 0;
text-decoration: none;
}

.menu-header li:hover ul, .menu-header li li:hover ul, .menu-header li li li:hover ul,   .menu-header li.sfhover ul, .menu-header li li.sfhover ul, .menu-header li li li.sfhover ul     {
left:auto;
}

Just make what changes you need to, to make it look like the example you have posted.