pixopoint submenu hover broken

Question

I am using the pixopoint multi level navigation menu with a divider separator line between items. If I hover the submenus, the main item menus background change and instead of the thin line divider img I get a full height blue bar. Below is the html and css and a link to my site where you can see it live. Thanks alot guys! test site: 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>

and 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

All you need to do is to change this (line 234, style.css)

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

to this:

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

The problem is that the blue line is a background image on the a , and when you hover away from the top level li , the a goes back to having the blue line as a background, so the CSS change above corrects that.