导航栏中的悬停效果无法正常工作

Question

我为导航栏/里面的列表创建了一个悬停效果。在悬停时我想通过应用框阴影来创建“按下按钮”效果。但阴影只在一个小盒子里铸造。 （见下图）

我希望阴影填满悬停区域周围的整个导航栏。 我不知道在哪里放置我的代码，并且会对任何帮助感到高兴：）

HTML CODE：

<nav>
    <div class="nav-wrapper">
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Projekte</a></li>
        </ul>
    </div>
</nav>

CSS代码：

html, body {
margin: 0;
padding: 0;
height: 100%;
background-color:white;
font-family: 'Open Sans', sans-serif;
}

.nav-wrapper {
margin: 0 auto;
margin-top: 50px;
width: 60%;
padding-top: 5px;
padding-bottom: 5px;
color:#787878;
box-shadow: 2px 2px 3px #BDBDBD;
border-radius: 5px;
background: #f9f9f9; /* Old browsers */
background: -moz-linear-gradient(top,  #f9f9f9 0%, #ededed 100%); /* FF3.6+      */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f9f9f9 0%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f9f9f9 0%,#ededed 100%); /* Opera   11.10+ */
background: -ms-linear-gradient(top,  #f9f9f9 0%,#ededed 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f9f9f9 0%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
}

ul {
list-style: none;
}

li {
display: inline;
padding: 0 15px;
}

li:hover {
box-shadow: 2px 2px 3px #BDBDBD inset;
}

a {
text-decoration: none;
color:#787878;
}

Answer 1

添加：

li:hover {
  box-shadow: 2px 2px 3px #BDBDBD inset, 2px 2px 3px #BDBDBD;
}

预览

或者这里的斜面效果：

li:hover {
  box-shadow: 2px 2px 3px #BDBDBD inset, -2px -2px 3px #BDBDBD inset;
}

预览

小提琴：http://jsbin.com/wolotuxico/1/edit?html,css,output

从评论更新

删除.nav-wrapper的填充并将其提交给li

.nav-wrapper {
  padding: 0;
}

li {
  display: inline-block;
  padding: 15px;
}

预览

小提琴：http://jsbin.com/bowawodode/2/edit

Answer 2

从导航中删除填充并将其添加到li中。请记住，边框位于填充区外和边距内。

实施例： https://jsfiddle.net/m98yedk6/1/

.nav-wrapper {
position: relative;
margin: 0 auto;
margin-top: 50px;
width: 60%;
color:#787878;
box-shadow: 2px 2px 3px #BDBDBD;
border-radius: 5px;
background: #f9f9f9; /* Old browsers */
background: -moz-linear-gradient(top,  #f9f9f9 0%, #ededed 100%); /* FF3.6+      */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f9f9f9 0%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f9f9f9 0%,#ededed 100%); /* Opera   11.10+ */
background: -ms-linear-gradient(top,  #f9f9f9 0%,#ededed 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f9f9f9 0%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
}
li {
display: inline-block;
padding: 10px;
}