Trouble with z-index on pure CSS dropdown menu

HTML & CSS
1

I’ve got a seemingly simple pure css drop down menu: https://jsfiddle.net/521b7kfq/

Everything works fine except the parent li is underneath the dropdown menu that appears on hover. Since I have borders around the parent li as well as the drop down ul, I want to somehow position the parent li so that it sets above the drop down menu so that the border from the dropdown menu isn’t cutting off the bottom of the link background. In other words, it should appear that the link background and drop down menu background are all the same background with no border between them like so: http://i.imgur.com/3fwugtE.png

How can I accomplish this?

2

This link should help.

I think you could also define the top border for the the ul that hovers as transparent.

3

Thanks for the reply but I don’t think that really helps my problem. I know how to make a three sided border, but in this case, the link itself has a three sided border where the dropdown menu has a four sided border. What I need to do is figure out how to overlap the link background so that it’s above the drop down menu and position it down slightly so it covers the top border of the drop down menu. Here’s an example: http://i.imgur.com/NcqIcPg.png

The red circle is the only area of the drop down menu that should not have a border which seems like the only way to accomplish this is to relatively position the links so that they’re overlapping the drop down. I just can’t figure out how to get that working.

4

Like you said, you need to position:relative the anchors, maybe add a z-index higher than the <ul>, and use top:100% and margin-top:-1px on the <ul>, to move it under the white background of the sibling <a>. You may also want to set bottom border-radius to zero.

5

As PVgr said do something like this:

.sort-options > li:hover > a {
	border-radius: 5px 5px 0 0;
	position:relative;
	z-index:21;
}
.sort-options li ul {
  top: 100%;
  margin-top:-1px;
}

The changes should be integrated into the existing code as I have just shown the changes.

1 Like
6

Thanks, Paul. That works great! I appreciate it.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.