0

我正在使用 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;
            }
4

1 回答 1

0

您需要做的就是改变它(第 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 更改纠正了这一点。

于 2013-06-03T07:40:06.510 回答