Geek asks and answers

Clean CSS dropdown menu just around

I am creating a css cc drop-down menu (code here: http://jsfiddle.net/SeXyv/7/ ) and I would like to have a border only around the outside, not between the items.

The problem I ran into is the border between the "theme" and "sub-topic 1" in the js.fiddle example. I can get the border all the way between them, but I want it to be on the upper right side as a path, and not directly between two links (where gold and gray meet)

Can someone help me here?

thank

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

+5
source share
2 answers

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

#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/

+4
source

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

Working fiddle here

Adjust angles etc.

0
source

More articles:


All Articles