Hide Section of a Box Shadow

css

Solution

You will need to add `overflow:hidden` on the `ul.menu` as honeybuzzer mentions, but since that would also cut-off the top shadow you should add some `padding-top` to the `ul.menu` as well..

Problem

Disclaimer: I have already seen the following questions and their solutions did not apply to me even though they are very similar situations: - Creating a CSS3 box-shadow on all sides but one - How to add drop shadow to the current element in a tab menu? - CSS shadows on 3 sides Simply put, I am trying to add a `-moz-box-shadow` of `0 0 10px` to the `.current_page_item` class that is applied to the currently active tab in the tab navigation at the top of my website. The website does not yet include the actual box-shadow or any of these changes, I have only been playing with these modifications in firebug for now before I actually publish them. Naturally this causes the shadow to appear on all sides, and so the bottom edge's shadow overlaps into the `.content` div which stores all of the blog's actual content, i.e. posts. Based on what I have seen so far, it seems like I should set the `z-index` of something, not sure what (I have tried `ul.menu`) to something lower and the `z-index` of the `.content` div to something higher, but this seems to have no effect. I am just wondering if this is normal behavior and if not, if someone could help me out with this situation. Thanks, I really appreciate it. EDIT: I put `box-shadow` in the post earlier, but I meant the respective specific directives, such as `-moz-box-shadow`. That was not the problem I was having.

Original source

Related problems