logo标签列表

如何制作不重叠阴影的导航栏

htmlcss
4
以下是代码的JSFiddle：https://jsfiddle.net/93pwfrt8/ 目前菜单的外观如下： enter image description here 我想要实现类似于这样的效果： enter image description here 但是奇怪的是，portfolio子菜单的阴影没有覆盖整个子菜单，而主菜单的阴影却覆盖了子菜单。
以下是侧边栏的HTML代码：
<aside>
    <nav>
        <ul>
        <li><a onclick = "$(#content).load(selector.php?content='about'); return false">About</a></li>
        <li>Portfolio
            <ul>
                <li><a onclick = "$(#content).load(selector.php?content='about'); return false">About</a></li>
                <li><a onclick = "$(#content).load(selector.php?content='about'); return false">About</a></li>
            </ul>
        </li>
        </ul>
    </nav>
</aside>

并且CSS：

html,
body {
  height: 100%;
  width: 100%;
}

nav {
  text-align: center;
}

nav ul {
  padding: 0px;
  text-align: center;
  list-style: none;
  width: 100%;
  -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
  -moz-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
}

nav ul li {
  color: #000;
  padding: 20px;
  font: bold 12px/18px sans-serif;
  display: block;
  position: relative;
  background-color: #FFF;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

nav ul li:hover {
  background: #EBEBEB;
  color: #F00;
}

nav ul li ul {
  position: absolute;
  top: 0px;
  right: -60%;
  width: 60%;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}

nav ul li ul li {
  background: #EBEBEB;
  display: block;
  color: #fff;
  width: 100%;
}

nav ul li ul li:hover {
  background: #ABABAB;
}

nav ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
  z-index: -1;
}

nav ul li>a {
  text-decoration: none;
  color: #000;
}

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

aside {
  float: left;
  position: fixed;
  width: 15%;
  clear: both;
}

我正在寻找一个解决方案，并希望能够解释清楚我做错了什么，以便我不会再犯同样的错误。

你做不到。CSS并不聪明到可以复制z轴堆叠的元素并应用自然阴影。盒子阴影总是需要投射在某个地方。 - Roko C. Buljan
我不想说“不能”，但是...完全同意。 - Roko C. Buljan
3个回答
3
虽然回答有点晚......但我更偏向于使用一些老派的方法，比如 `z-index`!! :)
演示： demo 
nav ul {
  z-index:1;/*added*/
  position:relative;/*added*/
  padding: 0px;
  text-align: center;
  list-style: none;
  width: 100%;
  -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
  -moz-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
}


nav ul li ul {
  position: absolute;
  top: 0px;
  right: -60%;
  width: 60%;
  display: none;
  opacity: 0;
  z-index:999; /*added*/
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
0

你可以通过使用clip-path来剪切不需要的阴影，从而实现你想要的效果。

Jsfiddle

html,
body {
  height: 100%;
  width: 100%;
}
nav {
  text-align: center;
}
nav ul {
  padding: 0px;
  text-align: center;
  list-style: none;
  width: 100%;
  -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
  -moz-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
}
nav ul li {
  color: #000;
  padding: 20px;
  font: bold 12px/18px sans-serif;
  display: block;
  position: relative;
  background-color: #FFF;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
nav ul li:hover {
  background: #EBEBEB;
  color: #F00;
}
nav ul li ul {
  position: absolute;
  top: 0px;
  right: -100.1%;
  z-index: 10;
  -webkit-clip-path: polygon(17% 0, 100% 0%, 100% 75%, 100% 100%, 0% 103%, -9% 50%, 17% 50%);
  clip-path: polygon(17% 0, 100% 0%, 100% 75%, 100% 100%, 0% 103%, -9% 50%, 17% 50%);
  width: 100%;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
nav ul li ul li {
  background: #EBEBEB;
  display: block;
  color: #fff;
}
nav ul li ul li:hover {
  background: #ABABAB;
}
nav ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}
nav ul li>a {
  text-decoration: none;
  color: #000;
}
nav ul li:hover >a {
  color: #F00;
}
aside {
  float: left;
  position: fixed;
  width: 15%;
  clear: both;
}
<aside>
  <nav>
    <ul>
      <li><a onclick="$(#content).load(selector.php?content='about'); return false">About</a>
      </li>
      <li>Portfolio
        <ul>
          <li><a onclick="$(#content).load(selector.php?content='about'); return false">About</a>
          </li>
          <li><a onclick="$(#content).load(selector.php?content='about'); return false">About</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</aside>

0

您还可以使用:pseudo元素来添加box-shadow

html,
body {
  height: 100%;
  width: 100%;
}
nav {
  text-align: center;
}
nav ul {
  padding: 0px;
  text-align: center;
  list-style: none;
  width: 100%;
  position: relative;
}
nav ul:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -2;
  -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
  -moz-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
}
nav ul ul:after {
  z-index: -2;
  right: -70%;
}
nav ul li {
  color: #000;
  padding: 20px;
  font: bold 12px/18px sans-serif;
  display: block;
  position: relative;
  background-color: #FFF;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
nav ul li:hover {
  background: #EBEBEB;
  color: #F00;
}
nav ul li ul {
  position: absolute;
  top: 0px;
  right: -60%;
  width: 60%;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
nav ul li ul li {
  background: #EBEBEB;
  display: block;
  color: #fff;
  width: 100%;
}
nav ul li ul li:hover {
  background: #ABABAB;
}
nav ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
  z-index: -1;
}
nav ul li>a {
  text-decoration: none;
  color: #000;
}
nav ul li:hover >a {
  color: #F00;
}
aside {
  float: left;
  position: fixed;
  width: 15%;
  clear: both;
}
<aside>
  <nav>
    <ul>
      <li><a onclick="$(#content).load(selector.php?content='about'); return false">About</a>
      </li>
      <li>Portfolio
        <ul>
          <li><a onclick="$(#content).load(selector.php?content='about'); return false">About</a>
          </li>
          <li><a onclick="$(#content).load(selector.php?content='about'); return false">About</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</aside>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接