以下是代码的JSFiddle:https://jsfiddle.net/93pwfrt8/
目前菜单的外观如下:
我想要实现类似于这样的效果:
但是奇怪的是,portfolio子菜单的阴影没有覆盖整个子菜单,而主菜单的阴影却覆盖了子菜单。
以下是侧边栏的HTML代码:
![enter image description here](https://istack.dev59.com/THmAc.webp)
![enter image description here](https://istack.dev59.com/dFraA.webp)
以下是侧边栏的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;
}
我正在寻找一个解决方案,并希望能够解释清楚我做错了什么,以便我不会再犯同样的错误。