how to set menu correctly in master page

See more:

ASP.NET

HTML5

Hi,
I have a menu in the master page as

<div>
                      <ul id="nav">
                          <li><a href="#">Home</a></li>

                          <li><a href="#">Portfolio</a></li>
                          <li><a href="#">Contact</a>
                              <ul>
                                  <li><a href="#">International</a></li>
                                  <li><a href="#">Corporate</a>
                                      <ul>
                                          <li><a href="#">International</a></li>
                                          <li><a href="#">Corporate</a></li>
                                          <li><a href="#">American Offices</a></li>
                                      </ul>
                                  </li>
                                  <li><a href="#">American Offices</a></li>
                              </ul>
                          </li>
                          <li><a href="#">Mission Statement</a></li>
                          <li><a href="#">Portfolio</a></li>
                      </ul>
                  </div>

css

#nav {


 margin: 0; padding: 0;

}

#nav li a, #nav li {
 float: left;

}

#nav li {
 list-style: none;
 position: relative;
}

#nav li a {
 padding: 1em 2em;
 text-decoration: none;
 color: #262626;
 background: #ffff00;

 border-top: 0px solid #545454;
 font-family:Calibri;
 font-size:1opx;
}

#nav li a:hover {
 background: #003b80;
 background: -moz-linear-gradient(top, #11032e, #2a0d65);
 background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
  color: #fff;
}


/* Submenu */

.hasChildren {
	position: absolute;
	width: 5px; height: 5px;
	background: black;
	right : 0;
	bottom: 0;
}

#nav li ul {
 display: none;
 position: absolute;
 left: 0;
 top: 100%;
 padding: 0; margin: 0;
}

#nav li:hover > ul {
 display: block;
}

#nav li ul li, #nav li ul li a {
 float: none;
}

#nav li ul li {
 _display: inline; /* for IE6 */
}

#nav li ul li a {
 width: 150px;
 display: block;
}

/* SUBSUB Menu */

#nav li ul li ul {
 display: none;
}

#nav li ul li:hover ul {
 left: 100%;
 top: 0;
}


/*#nav li ul*/ 

I have a home page ,where i have image banner ,the problem is when i mouse over on the menu main
item the sub-menu item are going inside the div (image banner).
My Menu is working properly.

I am not able to understand why submenu are hovering inside the image banner (div).

Please help