Question

我在使用Internet代码时遇到了一些麻烦，我的代码无效。

用于水平下拉菜单

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

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

Answer 2

由于您的网页位于Quirks Mode，因此:hover无效。

您已经拥有将触发标准模式的文档类型：

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

问题是以上上面的所有额外内容：doctype：

   <html> <head>  <!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将使用怪癖模式：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

执行此操作后，您的页面在IE中看起来可能会有所不同。您错误地为Quirks模式设计了一个页面 - 除了手动修复页面以在标准模式下工作之外，这里没有好的解决方案。

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

2 个答案: