相关疑难解决方法(0)

我的菜单有以下代码:

HTML:

<div class="container wrapper">
<nav>
    <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">page1</a></li>
        <li><a href="#">page2</a></li>
    </ul>
</nav>

而CSS:

.wrapper{
    padding:20px;
    background:#d3d3d3;
    height:200px;

}
.menu{
    background:#7F7979;
}
.menu li{
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 15px;
    display: inline-block;
}
.menu li a{
    color:white;
}
nav ul{
    list-style:none;
    margin:0
        padding:0;
}

我想要实现的是在左右角看起来像是来自容器后面(如果我们可以这样称呼它就像3D效果一样).没有尝试任何东西,因为我不知道如何实现这一点.

我google了一下,但没有找到任何网站来检查代码.如果有人知道,请指出我.

而且,我怎么能忽略这个container padding呢？是否有可能使用我的菜单里面container有一个padding并且仍然强迫边距超出它？

注意:我不是试图有人为我做这件事,我想弄清楚CSS我应该用什么属性来达到我想要的.

为了更好地解释我想要的东西:

如果有帮助,我的演示:

演示

非常感谢你指出了正确的方向.

我最后创建了侧边栏菜单.现在我需要在所选项目上创建功能区,如显示图像(红色)(我需要真正的灰色色带).但我不想使用图像背景并只使用css类.所以动态我可以删除类名并添加到另一个项目.

我有一个you_are_here选择项目的课程,我想要看到功能区.有可能吗？

 <ul class="outer">
  <li>
    <p class="top">My Account</p>
    <ul class="inner">
      <li><a href="#">My Account Home</a></li>
    </ul>
  </li>
  <li>
    <p>Demographics</p>
    <ul class="inner">
      <li><a href="#">Addresses</a></li>
      <li class="you_are_here"><a href="#">Contact Information</a></li>
      <li><a href="#">Photo</a></li>
      <li><a href="#">Change Password</a></li>
    </ul>
  </li>

</ul>


.outer P, .inner P { padding: 0.25em 0.75em; }
.outer>LI>P { font-weight: bolder; margin: 1em 0 0 0.5em;  }
.outer>LI>P.top {
    margin: 0; background: #eee; background: linear-gradient(0deg, #DCDCDC, #F6F6F6);
    -webkit-box-shadow: 0 0 20px rgba(219,215,219,1);
    -moz-box-shadow: 0 0 20px rgba(219,215,219,1);
    -ms-box-shadow: 0 0 20px rgba(219,215,219,1); …