使用嵌套列表的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）不允许伪元素：悬停在锚点（a）元素上。

Internet Explorer 7及更高版本在符合标准的模式下（strict！DOCTYPE）可以将hover伪类应用于任何元素，而不仅仅是链接。对于其他版本（6及以下），您可以使用javascript/jquery来模拟悬停功能。例如，通过在mouseenter/mouseleave上添加和删除类。

文章关于这个主题： Getting :hover to work in Internet Explorer 7

Answer 2

你:hover s的不工作，因为你的网页是在Quirks Mode。

你已经完成的文档类型，将触发标准模式：

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

的问题是上述所有多余的东西是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"> 

你需要摆脱一切以上<!DOCTYPE html ..。

我引用链接到页面：

怪癖模式，IE的任何版本如果有的话先 的DOCTYPE 也被触发。例如，如果一个 超文本文档包含注释 或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浏览器，一旦你做到这一点。你错误地设计了怪癖模式的页面 - 除了手动修复页面以在标准模式下工作以外，没有好的解决方案。