CODEWITHSUNDEEP
css
max
max

Reputation: 115

avoid menu li bottom shadow css

I'm working on a menu list and I want to get rid of the shadow under the selected li, in this example the letter C.

This is my code so far.

html,
body {
  background: #0769AD;
  margin: 0 auto;
  padding: 0;
}

div {
  width: 400px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

div ul {
  background: #fff;
  width: 100%;
  margin: 0;
  padding: 0;

  border-radius: 0px 0px 10px 10px;
  box-shadow: rgba(255, 255, 255, 0.3) 0 1px 0, rgba(0, 0, 0, 0.3) 0 -1px 0;
  box-shadow: 0 0 5px rgba(1, 1, 1, 0.7);
}

div ul li {
  display: inline-block;
  padding: 5px 20px;
}

.selected {
  background: #0769AD;
  box-shadow: inset 0px 8px 6px 0px rgba(0, 0, 0, 0.3);
}
<div>

  <ul>

    <li>A</li>
    <li>B</li>
    <li class='selected'>C</li>
    <li>D</li>

  </ul>

</div>

Upvotes: 0

Views: 49

Answers (1)

Kumar Gaurav
Kumar Gaurav

Reputation: 738

Update div ul { box-shadow: 0 -5px 5px rgba(1, 1, 1, 0.7);}

html,body{
background:#0769AD;
margin:0 auto;
padding:0;
}
div {
width:400px;
margin:0 auto;padding:0;
text-align:center;
}

div ul{
background:#fff;
width:100%;
margin:0;padding:0;

    border-radius: 0px 0px 10px 10px;
    
    box-shadow: 0 0 5px rgba(1, 1, 1, 0.7);
}


div ul li{
display:inline-block;
padding:5px 20px;
}

.selected{
background:#0769AD;
box-shadow: inset 0px 8px 6px 0px rgba(0,0,0,0.3);
position:relative;
}
.selected:after{
content:'';
display:block;
width:100%;
height:25px;
left:0;
top:0;
position:absolute;
box-shadow: 0 10px 0px #0769AD;
z-index:0;
}
<div>

<ul>

<li>A</li>
<li>B</li>
<li class='selected'>C</li>
<li>D</li>

</ul>

</div>

Upvotes: 1

Related Questions