pure CSS dropdown menu border around outside only

Question

I'm making a pure css dropdown menu (code here: http://jsfiddle.net/SeXyv/7/ ) and I would like to have a border only around the outside and not in between items.

The issue I am having is the border between the "topic" and "subtopic 1" in the js.fiddle example. I can get a border all the way across between the two, but I only want it on the top right portion as an outline, not directly between the two links (where the gold and gray meets)

Can anyone help me out here?

Thanks

EDIT: here is a pic of what I would like the border, the part circled in red, with the border stopping once it reaches the tab above it: http://tinypic.com/view.php?pic=300ehxt&s=6

Do you know you can user display: "none"; and display: "block" to show and hide the menu instead of moving -9999px off the window — jao, Jun 29 '12 at 05:18
@jao: But then screen readers won't be able to read the hidden menus. — Madara's Ghost, Jun 29 '12 at 05:28
@Truth: I did not know that. I guess you learn something new every day. — jao, Jun 29 '12 at 05:35
You need to have a top border. But use `z-index` in such a way that the submenu slides below the header. — Robin Maben, Jun 29 '12 at 05:45
Well, first of all, read this: http://stackoverflow.com/a/7923077/871050 — Madara's Ghost, Jun 29 '12 at 06:36

Musa · Accepted Answer · 2013-04-12T19:15:22.210

4

Basically you put a bottom border on the last element in the dropdown menu and a top border on the first element, then let the element that triggers the dropdown menu have a higher z-index than the menu, then push the menu up the width of the menu

#menu li:hover a {/*increace the z-index over that of the menu*/
    ...
    position:relative;
    z-index:5;
}
#menu li:hover li:first-child a{/*first menuitem gets a top border */
    border-top:2px black solid;
}
#menu li:hover li:last-child a{/*last menuitem gets a bottom border */
    border-bottom:2px black solid;
}
#menu li:hover ul{/* move up menu to cover up part of top border*/
    position:relative;
    top:-2px;
}

http://jsfiddle.net/SeXyv/14/

edited Apr 12 '13 at 19:15

answered Jun 29 '12 at 05:49

Musa

96,336
17
118
137

+1 for the answer even i am doing the same in my fiddle. But i must say that code can be improved & much cleaner & shorter. What say?? – SVS Jun 29 '12 at 05:56
The code can be much cleaner and shorter, this will involve rewriting the op code, I just added what was needed to solve the current problem – Musa Jun 29 '12 at 06:08
@Musa, if you could help with one more thing. If I add more text to a subtopic, http://jsfiddle.net/SeXyv/18/ The top tab expands because I have `#menu li:hover a { margin: 10px 25px 0 25px;}` so there is always a right margin of 25px (the grey submenu are 25px larger, and the top gold tab expands to that length) I've tried specifying a width for the top tab and a larger width for the child `#menu li:hover ul a` but then the next link over, page 2 gets pushed right to the width what I set the child list as. Any ideas for keeping the tab and position of the link to the right? – user1490248 Jun 29 '12 at 16:59

score 0 · Answer 2 · answered Jun 29 '12 at 05:18

0

add <li style="z-index: 5"><a href="#" class="bordertest" >Topic</a> to your HTML. And add the required class.

Working fiddle here

Adjust the corners etc.

answered Jun 29 '12 at 05:18

xan

4,640
13
50
83

Did you got what he want to ask? Totally misunderstood. – Ahsan Rathod Jun 29 '12 at 05:21
I guess he wanted to apply border only to "Topic" and not "subtopic". – xan Jun 29 '12 at 05:24
Ecko that isn't what I need, I don't a border on the bottom of topic. I only want a border on the top right space of subtopic 1 that stops once it reaches the topic please see this pic: http://tinypic.com/view.php?pic=300ehxt&s=6 I want the bit circled in red. Thanks for help – user1490248 Jun 29 '12 at 05:37
Okay. I failed to understand the question. :( – xan Jun 29 '12 at 08:53

pure CSS dropdown menu border around outside only

2 Answers2