4 level Css Menu

Question

Hi,

 

Below is the menu which is about four level .It is overlaping after making it four level. First it was two level which worked fine. but now itz giving me hard time. Kindly help. 

 

 

 

<ul class="myMenu">

<li><a href="#">Home</a></li>

<li><a href="#">About Us</a>

<ul>

<li><a href="#">me</a></li>

<li><a href="#">Managment</a></li>

<li><a href="#">Gallery</a></li>

</ul>

</li>

<li><a href="#">Services</a>

<ul>

<li><a href="#">Computers Skills - eLearning</a>

<ul>

<li><a href="#">About Management System</a></li>

<li><a href="#">Training Methodology </a></li>

<li><a href="#">Progressive Assessment</a></li>

<li><a href="#">Sample Case Study</a></li>

<li><a href="#">Testimonials from Learners</a></li>

<li><a href="#">Demo </a></li>

</ul>

</li>

<li><a href="#">Online Examination</a>

<ul>

<li><a href="#">About Online Examination</a></li>

<li><a href="#">Demo of Online Examination </a></li>

</ul>

</li>

<li><a href="#">Project Management</a>

<ul>

<li><a href="#">Experience</a></li>

<li><a href="#">Staff </a></li>

</ul>

</li>

<li><a href="#">On Campus Support</a></li>

</ul>

</li>

<li><a href="#">Products</a>

<ul>

<li><a href="#">learning Revolution </a></li>

<li><a href="#">Courses</a>

<ul>

<li><a href="#">MIT</a></li>

<li><a href="#">Courses</a>

<ul>

<li><a href="#"> Art</a></li>

<li><a href="#">Programming</a></li>

<li><a href="#">Publishing</a></li>

<li><a href="#">Graphics </a></li>

<li><a href="#">Animation</a></li>

<li><a href="#">AT </a></li>

</ul>

</li>

<li><a href="#">Diploma</a>

<ul>

<li><a href="#">Creative </a></li>

<li><a href="#">Technology </a></li>

<li><a href="#">Workplace Readiness</a></li>

<li><a href="#">Financial Services and Insurance</a></li>

<li><a href="#">Personal Financial </a></li>

</ul>

</li>

<li><a href="#">DU</a></li>

<li><a href="#">Esy</a></li>

<li><a href="#">Lib</a></li>

<li><a href="#">OA</a></li>

<li><a href="#">School</a></li>

<li><a href="#">JEE</a></li>

<li><a href="#">Secure Electronic </a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#">Operations</a>

<ul>

<li><a href="#">Projects</a>

<ul>

<li><a href="#"> University</a>

<ul>

<li><a href="#">About </a></li>

<li><a href="#">HR Services</a></li>

</ul>

</li>

<li><a href="#">al University</a>

<ul>

<li><a href="#">About</a></li>

<li><a href="#">HR Services</a></li>

</ul>

</li>

<li><a href="#">ah University</a>

<ul>

<li><a href="#">About PY TU</a></li>

<li><a href="#">HR Services</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

<li><a href="#">Partners</a>

<ul>

<li><a href="#">ICE</a></li>

<li><a href="#">dia</a></li>

<li><a href="#">Mbia-EgKCL Araypt</a></li>

<li><a href="#">Insp</a></li>

</ul>

</li>

<li><a href="#">Career</a>

<ul>

<li><a href="#">Recruitment Procedure </a></li>

<li><a href="#">Job Vacancies</a></li>

<li><a href="#">Send Your CV </a></li>

</ul>

</li>

<li><a href="#">Contact Us</a></li>

</ul>

 

 

 <css goes here>

 

 

/*style the main menu*/

.myMenu {

margin:0;

padding:0;

height: 34px;

width: 960px;

}

.myMenu li

{

list-style:none;

float:left;

font:12px Arial, Helvetica, sans-serif ;

height: 34px;

}

.myMenu li a:link, .myMenu li a:visited {

display:block;

text-decoration:none;

background-color:#016da3;

padding: 0.8em 2em;

margin:0;

border-right: 1px solid #fff;

border-left: 1px solid #fff;

color:#ffffff;

height:34px;

}

.myMenu li a:hover {

background-color:#0CF;

}

/*style the sub menu*/

.myMenu li ul {

position:absolute;

visibility:hidden;

border-top:1px solid #fff;

margin:0;

padding:0;

}

.myMenu li ul li {

display:inline;

float:none;

}

.myMenu li ul li a:link, .myMenu li ul li a:visited {

background-color:#09F;

width:auto;

}

.myMenu li ul li a:hover {

background-color:#0CF;

}

ul.myMenu li.highlight{ background:#0CF;}

ul.myMenu li.highlight a{ background:#09F; cursor:default;}