How do i remove the top box-shadow of a dropdown-menu in CSS?

Question

I need help. How do i remove the top box-shadow in css? Here is a image: https://picr.ws/images/b004e226b4eeb5616aa9d0bfdcb61b95.png

I have here a live-demo: www.hobbu.org

and here some snippets:

html

<nav>
  <ul class="container_12">
    <li><a href="#">Home</a>
      <ul>
        <li><a href="#">Support</a></li>
        <li><a href="#">Einstellungen</a></li>
        <li><a href="#">Ausloggen</a></li>
      </ul>
    </li>
    <li><a href="#">Community</a></li>
    <li><a href="#">Extras</a></li>
    <li><a href="#">Shop</a></li>
  </ul>
</nav>

css

nav {
  width: 100%;
  height: 50px;
  background-color: #fff;
  position: relative;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .16);
  -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .16);
  -moz-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .16);
}

nav ul {
  margin: 0;
  padding: 0;
}

nav ul li {
  line-height: 50px;
  margin: 0px 20px;
  display: inline-block;
  float: left;
}

nav ul li:after {
  margin-top: -2px;
  content: '';
  display: block;
  border-bottom: solid 2px #ff4081;
  transform: scaleX(0.0001);
  transition: transform .3s ease-in-out;
  -webkit-transform: scaleX(0.0001);
  -ms-transform: scaleX(0.0001);
  -webkit-transition: -webkit-transform .3s ease-in-out;

}

nav ul li:hover > ul {
  display: block;
}

nav ul li:hover:after {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}

nav ul li a {
  display: block;
  color: #212121;
  text-decoration: none;
}

nav ul li > ul {
  width: auto;
  height: auto;
  z-index: 100;
  display: none;
  margin-left: -20px;
  background-color: #fff;
  position: absolute;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .16);
  -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .16);
  -moz-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .16);
  animation-name: fadeIn;
  animation-duration: .3s;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: .3s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;
}

nav ul li > ul li {
  line-height: 35px;
  display: block;
  float: none;
}

nav ul li > ul li:after {
  margin-top: -3px;
  content: '';
  display: block;
  border-bottom: solid 0px transparent;
}

nav ul li > ul li a:hover {
  color: #ff4081;
}

@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

i already have set the dropdown z-index but the problem is, both the nav and dropdown has the same box-shadow

Sorry for my bad english, im from germany.

Answer 1

In fact, your question can be merely resolved through an underrated characteristic of box-shadow:

The ‘box-shadow’ property attaches one or more drop-shadows to the box. The property takes a comma-separated list of shadows, ordered front to back. Each shadow is given as a <shadow>, represented by 2-4 length values, an optional color, and an optional ‘inset’ keyword.
<shadow> = inset? && {2,4} && ?

Your current box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16) is only one of the possible <shadow>s as stated above.

You can simply prepend it with a first (so front) <shadow> with the desired characteristics, like:
box-shadow: #fff 0 -5px, 0 2px 10px 0 rgba(0, 0, 0, 0.16), where the 1st instance has:

• #fff has to be the same color as the master <ul> color
• 0 makes no horizontal (right) shadow
• -5pxmakes a vertical (natively down, but here up since the minus sign) shadow, which is just what you need to hide the top shadow generated by your previous unique (and now 2nd) instance

Then you have to manage with your red <ul> border-bottom, because now it is hidden also: it's up to you to imagine which method to use for that.

Answer 2

try changing your dropdown's css to this:

  box-shadow: 0 5px 10px -2px rgba(0,0,0,.16);
  -webkit-box-shadow: 0 5px 10px -2px rgba(0,0,0,.16);

Answer 3

Since, from your question I can interpret that you do not want to remove the box-shadow property from either of the elements (which according to me is the right thing to do), you can enclose the sub menu (the inner <ul> element) inside another element (like a <div>) and the change the CSS of the inner <ul> and outer <div> to hide the top shadow and keep showing all the other shadows.

I have created a fiddle for the solution. You can check it here. http://jsfiddle.net/c5nLay4L/2/

Basically what we are doing is that the outer <div> (the one with class = "submenu-container") has been set to hide anything that goes outside its boundaries (by using overflow: hidden). This way all shadows would get hidden. But we want to hide just the top shadow. Hence I added padding to all sides of the container <div> except the top. This way, the <div> is now big enough to show all other shadows except the top. Then you position this outer div (with position: absolute and top: 50px to bring it in the same position as the inner submenu <ul> (and of course remove the positioning styles from <ul>)

Reason why changing z-index won't work The effect of changing the z-index depends on the stacking context of the element with the z-index and its parent's stacking context.

You can read about it here https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

When you give the nav element a higher z-index that means the parent now has a stacking context. Changing the z-index of the inner <ul> is moving the ul within this parent context. Hence it cannot go under that <nav>.

To understand it better, consider a chair with a book kept on it. You lift the chair, the book rises with it. You lift the book, only the book rises, nothing happens to the chair. But the book cannot go under the seat of the chair even if you force it to. It can only rise above the seat of the chair. Unless of course you move the chair from under the book. Then the book falls below the chair. Here the chair is your <nav>. Book is the inner submenu <ul>. Only if you change the stacking context to avoid this parent-child container relationship, will the z-index start taking effect