Wordpress css navigation menu using nested lists

I'm having some trouble with Internet Explorer with my code not working.

Its for a horizontal drop down menu

    <div id="n" class="nav">
  <div class="menu">
   <ul>
   <li class="page_item page-item-5 current_page_item">
    <a href="http://www.webcarepreview.co.uk/mandalandscaping/" title="Home">Home
    </a>
   </li>
   <li class="page_item page-item-2">
    <a href="http://www.webcarepreview.co.uk/mandalandscaping/about/" title="Our Services">Our Services
    </a>
     <ul class='children'>
      <li class="page_item page-item-16">
       <a href="http://www.webcarepreview.co.uk/mandalandscaping/about/maintenance/" title="Maintenance">Maintenance
       </a>
      </li>
      <li class="page_item page-item-125">
       <a href="http://www.webcarepreview.co.uk/mandalandscaping/about/nidagravel/" title="Nidagravel">Nidagravel
       </a>
      </li>
      <li class="page_item page-item-213">
       <a href="http://www.webcarepreview.co.uk/mandalandscaping/about/timber-tech/" title="Timber Tech">Timber Tech
       </a>
      </li>
     </ul>
    </li>
    <li class="page_item page-item-7">
     <a href="http://www.webcarepreview.co.uk/mandalandscaping/galleries/" title="Galleries">Galleries
     </a>
      <ul class='children'>
       <li class="page_item page-item-76">
        <a href="http://www.webcarepreview.co.uk/mandalandscaping/galleries/garden-1/" title="Garden 1">Garden 1
        </a>
       </li>
       <li class="page_item page-item-104">
        <a href="http://www.webcarepreview.co.uk/mandalandscaping/galleries/garden-2/" title="Garden 2">Garden 2
       </a>
     </li>
     <li class="page_item page-item-134">
      <a href="http://www.webcarepreview.co.uk/mandalandscaping/galleries/garden-3/" title="Garden 3">Garden 3
      </a>
     </li>
     <li class="page_item page-item-209">
      <a href="http://www.webcarepreview.co.uk/mandalandscaping/galleries/decking/" title="Garden 4">Garden 4
      </a>
     </li>
    </ul>
   </li>
   <li class="page_item page-item-10">
    <a href="http://www.webcarepreview.co.uk/mandalandscaping/watch-video/" title="Project Videos">Project Videos
    </a>
   </li>
   <li class="page_item page-item-8">
    <a href="http://www.webcarepreview.co.uk/mandalandscaping/staff-profile/" title="About Us">About Us
    </a>
   </li>
   <li class="page_item page-item-6">
    <a href="http://www.webcarepreview.co.uk/mandalandscaping/contact/" title="Contact">Contact
   </a>
  </li>
 </ul>
</div>
    </div>
</div>

and here is my css bit

 .nav-bg
{
    background-color:#ebebeb;   /* -- Your navegation color remember the "#" -- */
    height: 30px;           /* -- change to your image Height -- */
    width: 100%;        /* -- Change navegation background width 100% = Full Screne -- */
    margin: 0px;/* DO NOT CHANGE */
    padding: 0px;/* DO NOT CHANGE */
    position: relative;
}

#n
{
    margin: 0;
    padding: 0;
    background-color:#999999;/* -- Your Background color remember the "#" -- */
    height:30px;        /* -- change navegation height -- */
    width: 878px;/* -- change to the size of your canvis recomend same size as header image -- */
    margin-left:auto;
    margin-right:开发者_Go百科auto;

}

.menu ul
{
    margin: 0;/* DO NOT CHANGE */
    padding: 0;/* DO NOT CHANGE */
    line-height: 30px;      /* -- MAKE SAME AS "#n ul li a" height !!! -- */
}

.menu li
{
    margin: 0;/* DO NOT CHANGE */
    padding: 0;/* DO NOT CHANGE */
    list-style:none;/* DO NOT CHANGE */
    float:left;/* DO NOT CHANGE */
    position:relative;/* DO NOT CHANGE */
    background-color:#999999;
}

.menu ul li a
{
    text-align:center;          /* -- aligns your link text -- */
    text-decoration:none;       /* -- gets rid of underline on menu links -- */
    font-family:Arial, Helvetica, sans-serif;/* -- Change fot to suit your Theme -- */
    height:30;
    width:146;
    display:block;/* DO NOT CHANGE */
    color:#FFF;
    font-size: 18px;
}

.menu ul ul 
{
    position:absolute;/* DO NOT CHANGE */
    visibility:hidden;/* DO NOT CHANGE */
    top:30px;           /* -- MAKE SAME AS "#n ul li a" height !!! -- */
    z-index:999999;/* DO NOT CHANGE */
}

.menu ul li:hover ul
{
    visibility:visible;/* DO NOT CHANGE */
}

.menu li:hover
{
    background-color:#f1645e;   /* -- Parent hover color --*/
}

.menu ul li:hover ul li a:hover     /* -- Sub item options -- */
{
    background-color:#cccccc;   /* -- Sub item hilight color -- */
    color:#000000;          /* -- Sub item tect color -- */
}

as you can see via this link http://www.webcarepreview.co.uk/mandalandscaping/

Internet Explorer (version 6 and below and 7 in certain cases) does not allow the pseudo element :hover on then the anchor (a) element.

Internet Explorer 7 and later, in standards-compliant mode (strict !DOCTYPE), can apply the :hover pseudo-class to any element, not merely links. For other versions (6 and below) you can use javascript/jquery to emulate the hover functionality. For instance by adding and removing a class on mouseenter/mouseleave.

Articles about this subject: Getting :hover to work in Internet Explorer 7

Your :hovers aren't working because your page is in Quirks Mode.

You already do have a doctype that will trigger Standards Mode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The problem is all the extra stuff above that doctype:

<!-- this template was coded by .. --> 
<!-- this template was coded by .. --> 


<!-- Call our header from header.php in the template file path --> 
<html> 
<head> 
<!-- this template was coded by .. --> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">

You need to get rid of everything above <!DOCTYPE html ...

Quoting the page I linked to:

Quirks mode in any version of IE will also be triggered if anything precedes the DOCTYPE. For example, if a hypertext document contains a comment or any tag before the DOCTYPE, IE will use quirks mode:

<!-- This comment will put IE 6, 7, 8, and 9 in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Your page might look somewhat broken in IE once you do this. You've made the mistake of wilfully designing a page for Quirks Mode - there's no good solution here other than to manually fix the page to work in Standards Mode.