CSS / jQuery dropdown menu issue

Question

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.

Because that won't do what I specified in the question: to have the tab look continuous with the submenu. Compare Moe Asaad's jsfiddle to yours. Thanks for taking a look though. — GluePear
– GluePear, Commented Sep 28, 2013 at 22:43

Moe Assaad · Accepted Answer · 2013-09-28 22:27:01Z

2

try this: http://jsfiddle.net/qKyhZ/10/

i added this in css :

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

answered Sep 28, 2013 at 22:27

Moe Assaad

3371 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GluePear Over a year ago

That's a really interesting solution, thanks. Works perfectly in Firefox, and with a bit of tweaking to the "left" attribute for Chrome and IE10.

Erik Berger · Accepted Answer · 2013-09-28 22:25:51Z

0

Not sure if this what you're looking for, but why not use a <hr> or <div> to render the top horizontal line and style/position accordingly?

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

answered Sep 28, 2013 at 22:25

Erik Berger

6092 gold badges13 silver badges24 bronze badges

2 Comments

Erik Berger Over a year ago

Ok I see your updated fiddle and see that you want the line under the menu. Nevermind.

GluePear Over a year ago

Yeah, sorry about that mix-up. Thanks for taking the effort.

Collectives™ on Stack Overflow

CSS / jQuery dropdown menu issue

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related