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.
try changing your dropdown's css to this: