使用嵌套列表的Wordpress CSS导航菜单

如何解决使用嵌套列表的Wordpress CSS导航菜单

| 我的代码无法正常工作，导致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/

解决方法

Internet Explorer（在某些情况下为6版及以下版本，在某些情况下为7版）不允许在锚点（a）元素上使用伪元素：hover。 Internet Explorer 7和更高版本，在符合标准的模式下（严格为！DOCTYPE），可以将：hover伪类应用于任何元素，而不仅仅是链接。对于其他版本（6及更低版本），您可以使用javascript / jquery来模拟悬停功能。例如，通过在mouseenter / mouseleave上添加和删除一个类。有关此主题的文章：悬停以在Internet Explorer 7中工作 , 您的2英镑不起作用，因为您的页面处于Quirks模式。您已经有一个将触发“标准模式”的文档类型：

<!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中可能看起来有些破损。您已经犯了故意为Quirks Mode设计页面的错误-除了手动修复页面以在Standards Mode下工作以外，这里没有其他好的解决方案。

使用嵌套列表的Wordpress CSS导航菜单

如何解决使用嵌套列表的Wordpress CSS导航菜单

解决方法

相关推荐