Wordpress CSS меню навигации, используя вложенные списки

Question

У меня проблемы с Internet Explorer, когда мой код не работает.

Это для горизонтального выпадающего меню

    <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>

и вот мой бит css

 .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: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 -- */
}

как вы видите по этой ссылке http://www.webcarepreview.co.uk/mandalandscaping/

Answer 1

Internet Explorer (версии 6 и ниже и 7 в некоторых случаях) не допускает псевдоэлемент: наведите курсор на элемент anchor (a).

Internet Explorer 7 и более поздние версии в режиме, совместимом со стандартами (строго! DOCTYPE), могут применять псевдокласс: hover к любому элементу, а не просто к ссылкам. Для других версий (6 и ниже) вы можете использовать javascript / jquery для эмуляции функции наведения мыши. Например, добавив и удалив класс в mouseenter / mouseleave.

Статьи на эту тему: Начало работы: наведите курсор на работу в Internet Explorer 7

Answer 2

Ваши :hover не работают, поскольку ваша страница находится в режиме Причуды .

У вас уже есть тип документа, который активирует стандартный режим:

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

Проблема в том, что все лишние вещи выше этого типа:

<!-- 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">

Вам нужно избавиться от всего выше <!DOCTYPE html ...

Цитирование страницы, на которую я ссылался:

Причудливый режим в любой версии IE будет также будет срабатывать, если что-то предшествует ДОКТИП. Например, если гипертекстовый документ содержит комментарий или любой тег перед DOCTYPE, IE будет использовать режим причуд:

<!-- 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">

Ваша страница может выглядеть несколько неработающей в IE, как только вы это сделаете. Вы сделали ошибку, умышленно разработав страницу для режима «Причуды» - здесь нет иного решения, кроме ручной настройки страницы для работы в режиме «Стандарты».