2

This is a tricky one to explain: I'm trying to get a dropdown menu that has a tab for the menu item and a wider block for the submenu. The entire menu rests on a 1px horizontal line. It's easier to explain via jsfiddle

The header has a border-bottom attribute. The navigation has a list-style-type of none, and its items are floated next to each other. This is the rollover tab:

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
}

And this is the submenu tag:

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;
    }

The problem is (as you can see from the jsfiddle) that the top of the submenu occludes the horizontal line. If I add a border-top attribute to it, then the border continues under the tab, which I want to look continuous with the submenu.

Any ideas on how to achieve this very welcome.

EDIT: Updated the jsfiddle.

4

2 回答 2

2

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

我在css中添加了这个：

ul .submenu:before {
background-color: #FF0000;
content: "";
height: 1px;
left: 71px;
position: absolute;
top: 0;
width: 120px;
}
于 2013-09-28T22:27:01.280 回答
0

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

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

于 2013-09-28T22:25:51.513 回答