pixopoint子菜单悬停打破

Question

我正在使用pixopoint多级导航菜单和分隔线之间的项目。如果我将鼠标悬停在子菜单上，主菜单的菜单背景会发生变化，而不是细线分隔线img，我会得到一个完整高度的蓝色条。下面是html和css和一个链接到我的网站，你可以看到它的生活。非常感谢你们！测试地点：http://anamdesigns.net/allergy/

HTML：

  <ul> 
       <li class="toplink"><a href="#">Home</a></li> 
       <li class="toplink"><a href="#">About Us</a> 
      <ul> 
       <li><a href="#">our practice</a></li> 
       <li><a href="#">our doctors</a></li> 
       <li><a href="#">location and hours</a></li> 
       <li><a href="#">office policies</a></li> 
      </ul> 
      </li> 
       <li class="toplink"><a href="#">What We Do</a> 
      <ul> 
       <li><a href="#">allergy testing</a></li> 
       <li><a href="#">list of services</a></li> 
      </ul> 
      </li> 
       <li class="toplink"><a href="#">Patient Info</a> 
      <ul> 
       <li><a href="#">insurance info</a></li> 
       <li><a href="#">patient forms</a></li> 
       <li><a href="#">prescription refill request</a></li> 
       <li><a href="#">allergy shots schedule</a></li> 
       <li><a href="#">what is an allergist?</a></li> 
      </ul> 
      </li> 
       <li class="toplink"><a href="#">Resources</a> 
      <ul> 
       <li><a href="#">controlling outdoor allergies</a></li> 
       <li><a href="#">allergy links</a></li> 
       <li><a href="#">patient forms</a></li> 
       <li><a href="#">faqs</a></li> 
      </ul> 
      </li> 
      <li class="toplink"><a class="noline" href="contact">Contact</a></li> 
      </ul></ul> 

和css：

  .jquerycssmenu{ 
       float: left; 
       width: 100%; 
       height: 63px; 
       line-height: 63px; 
       background-image: url(images/nav_blue_repeat.png); 
       background-repeat: repeat-x; 
       margin-top: 16px; 
       -moz-border-radius-topleft: 10px; 
       -webkit-border-top-left-radius: 10px; 
       border-top-left-radius: 10px; 
       -moz-border-radius-topright: 10px; 
       -webkit-border-top-right-radius: 10px; 
       border-top-right-radius: 10px; 
      } 

      .jquerycssmenu ul{ 
      margin: 0; 
      padding: 0; 
      list-style-type: none; 
      } 

      /*Top level list items*/ 
      .jquerycssmenu ul li{ 
      position: relative; 
      display: inline; 
      float: left; 
      } 

      /*Top level menu link items style*/ 
      .jquerycssmenu ul li a{ 
        font-family: 'DroidSerifRegular', georgia; 
        font-size: 19px; 
        line-height: 33px; 
        letter-spacing: 1px; 
        color: #fff; 
        padding: 15px 32.6px; 
        text-decoration: none; 
        background-image: url(images/menuline.png); 
        background-position: 100% 50%; 
        background-repeat: no-repeat; 
        display: block; 
        margin-right: 0px; /*spacing between tabs*/ 
        border-bottom-width: 0; 
        border: 0; 
      } 

      .jquerycssmenu ul li a:hover, .jquerycssmenu ul li.toplink:hover { 
        background-image: url(images/nav_green_repeat.png); /*tab link background during hover state*/ 
      } 

      .jquerycssmenu ul li:first-child { 
       -moz-border-radius-topleft: 10px; 
       -webkit-border-top-left-radius: 10px; 
       border-top-left-radius: 10px; 
      } 

      .jquerycssmenu ul li:last-child { 
       -moz-border-radius-topright: 10px; 
       -webkit-border-top-right-radius: 10px; 
       border-top-right-radius: 10px; 
      } 

      .jquerycssmenu ul li a.noline { 
       background-image: none; 
      } 

      /*1st sub level menu*/ 
      .jquerycssmenu ul li ul{ 
      position: absolute; 
      text-transform: capitalize; 
      left: 0; 
      display: block; 
      visibility: hidden; 
      z-index: 2; 
      border: 3px solid #fff; 
      } 

      /*Sub level menu list items (undo style from Top level List Items)*/ 
      .jquerycssmenu ul li ul li{ 
      display: list-item; 
      float: none; 
      } 

      /*All subsequent sub menu levels vertical offset after 1st level sub menu */ 
      .jquerycssmenu ul li ul li ul{ 
      top: 0; 
      } 

      /* Sub level menu links style */ 
      .jquerycssmenu ul li ul li a{ 
       font-family: 'DroidSerifRegular', georgia; 
       margin-top: 14px; 
       font-size: 14px; 
       line-height: 17px; 
       color: #56513f; 
       width: 182px; /*width of sub menus*/ 
       height: 25px; 
       line-height: 25px; 
       background: #dcd4b5; 
       padding: 0 20px; 
       margin: 0; 
       border-top-width: 0; 
       border-bottom: 1px solid #fff; 
      } 

      .jquerycssmenu ul li ul li a:hover{ /*sub menus hover style*/ 
       background-image: url(images/submenu_hover_repeat.png); 
       background-repeat: repeat-x; 
       color: #fff; 
      } 

Answer 1

所有你需要做的就是要改变这种（行234 style.css文件）

.jquerycssmenu ul li a:hover, .jquerycssmenu ul li.toplink:hover { 
    background-image: url(images/nav_green_repeat.png); 
} 

对此：

.jquerycssmenu ul li a:hover, .jquerycssmenu ul li.toplink:hover, .jquerycssmenu ul li.toplink:hover > a { 
    background-image: url(images/nav_green_repeat.png); 
} 

的问题是，蓝线是在a背景图像，当你从顶层li盘旋而去，a追溯到具有蓝线为背景，所以上面的CSS变化纠正了。