2

我有一个水平菜单，它是纯 HTML、CSS 和 Jquery。所有的菜单都很完美，但是菜单的设计有一个非常愚蠢的分隔符，这给我带来了问题。无论如何，悬停菜单上的 CSS 甚至可以覆盖其他菜单项之间的分隔符吗？

这是菜单：在此处输入图像描述

这是悬停：在此处输入图像描述

这就是问题 ：在此处输入图像描述

  • 很重要！菜单是动态的（我不能让每一个都具有给定的宽度）
  • 分隔符 h.line 是一个 *.png 文件
  • 所有菜单都是纯 HTML、CSS 和 Jquery（问题仅在 CSS 中），没有菜单图像背景，图像只是“分隔线”

CSS代码（我认为只有这部分是问题）：

    .white ul.mega-menu li {
    float: left; 
    margin: 0; 
    padding: 0;
    text-transform: uppercase;
}
.white ul.mega-menu li a {
    float: left; 
    display: block; 
    color: #47515c; 
    padding: 0px 15px; 
    text-decoration: none;
    border-left: 1px solid #fff;
    background: url(../images/top_menu_separate.png) no-repeat right; 


}
.white ul.mega-menu li a.dc-mega {position: relative;}
.white ul.mega-menu li.mega-hover a, .white ul.mega-menu li a:hover {
    color: #47515c;
    background: #dadcde;
    border-left: 1px solid #dadcde;
    padding-bottom: 0px;
    z-index: 5000000;
    overflow: visible;

}

HTML：

            <div class="white">  
                <ul id="mega-menu-9" class="mega-menu">
                    <li><a href="test.html" class="multi">Expertise</a></li>
                    <li><a href="test.html">About us</a></li>
                    <li><a href="#">Our People</a></li>
                    <li><a href="#">Our work</a></li>
                    <li><a href="#">Candidates</a></li>
                    <li><a href="#">Careers</a></li>
                    <li><a href="#">Contact us</a></li>
                </ul>
            </div>

我认为这是方法：

.white ul.mega-menu li:hover
{
    border-left: 1px solid #dadcde;
    margin-left: -1px;
}

唯一的问题是，当悬停时，它会将所有菜单从右向左移动 1px，看起来很糟糕......有什么技巧吗？

4

2 回答 2

1

我在 jsFiddle 中重新创建了这个问题。

jsFiddle：http: //jsfiddle.net/gkgUj/

解决方案：

li:hover + li a {
    border-left: 0 none;
    margin-left: 1px;
}

在你的情况下添加这个

.white ul.mega-menu li:hover + li a {
    background-image: none;
}
于 2013-03-14T17:54:18.607 回答
0

一种选择是将悬停的项目向左移动一个像素以覆盖分隔符：

.white ul.mega-menu li:hover
{
    border-left: 1px solid #dadcde;
    margin-left: -1px;
}

另一种选择是将分隔符放在每个项目的左侧，然后在其左侧的项目悬停时将其替换为白色边框：

.white ul.mega-menu li
{
    background: url(../images/top_menu_separate.png) no-repeat left;
}

.white ul.mega-menu li:hover + li
{
    background: none;
    border-left: 1px solid #fff;
}
于 2013-03-14T17:59:24.247 回答