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
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.
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.