Adding new designed menu to wordpress - php

Question

I designed a menu in php file and css file..
here how its look like:
<div class = "menu3">
<ul>
<div id="menu2">
<li>something11
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</li>
</div>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</div>
<div id="header_wrapper">
</div>
</div>
</body>
</html>
<script>
$(function() {
$('#header_wrapper').hide();
$("#menu2").mouseenter(function() {
$("#header_wrapper").show();
}).mouseleave(function() {
$("#header_wrapper").hide();
});
});
$(function() {
$("#header_wrapper").mouseenter(function() {
$("#header_wrapper").show();
}).mouseleave(function() {
$("#header_wrapper").hide();
});
});
</script>
and the css:
.menu3 ul ul {
display: none;
}
.menu3 ul li:hover > ul {
display: inline;
}
.menu3{
width:1388px;
height:36px;
margin-top: -16px;
margin-left: -8px;
background-color:black;
}
.menu3 ul {
list-style: none;
position: relative;
margin-left: 250px;
line-height:35px;
}
.menu3 ul:after {
content: ""; clear: both; display: inline;
}
.menu3 ul li {
float: left;
}
.menu3 ul li:hover {
color:gray;
}
.menu3 ul li a:hover{
color:gray;
}
.menu3 ul li a {
display: inline; padding: 0 6px;
color: white; text-decoration: none;
font-weight: bolder; font-size: 15px;
}
#menu2 li a:hover{
color:gray;
}
#menu2 li a {
display: inline; /*padding: 0 6px;*/
color: white; text-decoration: none;
font-weight: bolder; font-size: 15px;
}
.menu3 ul ul {
background-color:black;
position: absolute;
margin-left: -66px;
line-height: 20px;
}
.menu3 ul ul li {
float: none;
position: relative;
}
.menu3 ul li {
float: left;
position: relative;
}
.menu3 ul ul li a {
padding: 15px 40px;
}
.menu3 ul ul li:hover {
color:gray;
}
#header_wrapper
{
background-color: black;
width: 1388px;
height: 150px;
margin-top: 0px;
float: left;
margin-left: -8px;
}
the problem is I dont know how to add those file to the theme,and I dont know how to put them in the code (header.php/function.php) I really dont know how to do,I just want to delete the current left-side menu,and put the new menu i created the code I created there is a way to do that? Thanks for helpers!

Answer 1

I understand what you need. You want to convert your html menu to wordpress menu. You have to use wp_nav_menu() Here is
Tutorial
Codex Tutorial

Answer 2

<div id="menu2"> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?> </div>
function wp_nav_menu will dynamically create menu add the pages from back end and you will see them in front end add the css to style.css