I am embedding a website that I have in HTML and CSS into WordPress.

I want to add the below menu inside it.

 

How to I change where the classes are in the default WordPress menu? I want to add classes into the ul and li in a menu.

There is a div between <nav> and <ul> how do I get rid of that?

 

 

<nav>
	<ul id="main-nav" class="clearfix">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">FAQ</a></li>
                <li><a href="#">Contact Us</a></li>
	</ul>
</nav>

 

#main-nav {
	width: 100%;
	background: #ccc;
	margin: 0;
	padding: 0;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 100;
	/* box shadow */
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
}
#main-nav li {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	position: relative;
}
#main-nav li:first-child {
	margin-left: 10px;
}
#main-nav a {
	line-height: 100%;
	font-weight: bold;
	color: #000;
	display: block;
	padding: 14px 15px;
	text-decoration: none;
	text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}
#main-nav a:hover {
	color: #fff;
	background: #474747;
	/* gradient */
	background: -webkit-gradient(linear, left top, left bottom, from(#282828), to(#4f4f4f));
	background: -moz-linear-gradient(top,  #282828,  #4f4f4f);
	background: linear-gradient(-90deg, #282828, #4f4f4f);
}

 

Let's modify header.php in your child theme change class at here

You might want to check out the custom navigation feature of WordPress so you avoid hard coding the links directly into the theme. This link will help if you're developing a custom theme:

 

http://codex.wordpress.org/Function_Reference/wp_nav_menu

 

If you're working with a pre-made or child theme, you'll want to look through your files for the navigation code (most likely the header.php) and edit the code from there. I'd suggest using a child theme if you aren't already so that you can copy over the header.php (or wherever your navigation code is) and edit it. This way your customizations won't be overwritten if you update the theme.

Ren has posted up the best link of reference there. There's a bit on there about defining the classes and ID's of the UL.