CSS / jQuery 下拉菜单问题答案

【问题标题】：CSS / jQuery dropdown menu issueCSS / jQuery 下拉菜单问题
【发布时间】：2013-09-29 06:37:45
【问题描述】：

这是一个难以解释的问题：我正在尝试获得一个下拉菜单，其中包含菜单项的选项卡和子菜单的更宽块。整个菜单位于 1px 水平线上。通过 jsfiddle

更容易解释

标题有一个border-bottom 属性。导航的列表样式类型为 none，其项目彼此相邻浮动。这是翻转标签：

ul li a {
    color:#222222;
    height:20px;
    text-decoration:none;
    display:block;
    background:white;
    padding:6px 10px 8px 10px;
    border-left:1px solid #FFFFFF;
    border-right:1px solid #FFFFFF;
    border-top:1px solid #FFFFFF;
    transition: border-color 0.23s linear;
}

ul li a:hover {
    color:#FF0000;
}

ul li.toplevel a:hover, ul li.toplevel a.hoversub {
    color:#FF0000;
    height:19px;
    border-left:1px solid #FF0000;
    border-right:1px solid #FF0000;
    border-top:1px solid #FF0000;
    background:white;
    padding-bottom:9px;
    border-color:#FF0000
}

这是子菜单标签：

ul.submenu {
    position:absolute;
    list-style-type:none;
    width:187px;
    margin:0 0 0 0;
    padding:0;
    display:none;
    z-index:999999;
    background:#FFFFFF;
    /*border-top:1px solid #FF0000;*/
    border-left:1px solid #FF0000;
    border-right:1px solid #FF0000;
    border-bottom:1px solid #FF0000;
    }

问题是（从 jsfiddle 可以看出）子菜单的顶部遮挡了水平线。如果我向它添加一个border-top 属性，那么边框会在选项卡下继续，我希望它看起来与子菜单连续。

任何关于如何实现这一点的想法都非常受欢迎。

编辑：更新了 jsfiddle。

【问题讨论】：

为什么不为子菜单添加一个顶部边距？
因为那不会做我在问题中指定的：让标签看起来与子菜单连续。将 Moe Asaad 的 jsfiddle 与您的进行比较。不过感谢您的观看。
我以为你希望边框通过标签显示。

标签： jquery css drop-down-menu

【解决方案1】：

试试这个：http://jsfiddle.net/qKyhZ/10/

我在css中添加了这个：

ul .submenu:before {
background-color: #FF0000;
content: "";
height: 1px;
left: 71px;
position: absolute;
top: 0;
width: 120px;
}

【讨论】：

这是一个非常有趣的解决方案，谢谢。在 Firefox 中完美运行，并且对 Chrome 和 IE10 的“left”属性进行了一些调整。

【解决方案2】：

不确定这是否是您要查找的内容，但为什么不使用<hr> 或<div> 来相应地渲染顶部水平线和样式/位置？

http://jsfiddle.net/qKyhZ/6/

【讨论】：

好的，我看到你更新的小提琴，看到你想要菜单 under 行。没关系。
是的，很抱歉搞混了。感谢您的努力。