0
このプロジェクトでは、メニューバーにテストドロップダウンメニューがいくつか表示されているので、Navbarを完成させています。私はホバーとアクティブなクラスを持っていますこのボックスシャドウは新しいメニューリストには表示されません。最初のliは9999、2番目は999ですが、まだボックスシャドウの上にレンダリングされます。ホバー上のul要素の上にボックスシャドウを残す
ここはjsのフィドルです。
https://jsfiddle.net/ybarpz3x/25/
ありがとうございました！これは
nav {
position: fixed;
background-color: #fff;
width: 100vw;
z-index: 999; }
nav ul {
float: right;
font-size: 0px;
padding: 0;
margin: 0;
color: #337ab7;
position: relative;
z-index: 9999; }
nav ul .current-top-menu-item {
box-shadow: 0px 4px 0px #36B8C8; }
nav ul .current-top-menu-item a {
color: #204E76; }
nav ul .top-menu-collapsed {
padding: 20px 19px; }
nav ul * {
-webkit-transition: all 170ms ease-out;
-moz-transition: all 170ms ease-out;
-ms-transition: all 170ms ease-out;
transition: all 170ms ease-out; }
nav ul li {
display: inline-block;
font-family: "Raleway", sans-serif;
text-decoration: none;
font-size: 1.6rem;
text-transform: capitalize;
font-weight: 600;
position: relative;
padding: 30px 24px;
z-index: 9999; }
nav ul li a {
position: static; }
nav ul li a:hover, nav ul li a:active, nav ul li a:focus, nav ul li a:visited {
text-decoration: none; }
nav ul li div {
position: absolute;
top: 0;
left: 0;
z-index: 666666;
width: auto;
height: auto;
margin: 22px 24px;
padding: 0;
background-color: rgba(0, 0, 0, 0.5); }
nav ul li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0;
width: 100%;
z-index: 999; }
nav ul li ul li {
z-index: 999;
text-align: center;
float: none;
width: 100%;
padding: 8px 0px;
display: block; }
nav ul li:hover, nav ul li:active {
z-index: 9999;
cursor: hand;
box-shadow: 0px 4px 0px #36B8C8; }
nav ul li:hover a, nav ul li:active a {
color: #204E76; }
nav ul li:hover ul, nav ul li:active ul {
display: block; }
nav ul li.active:after {
box-shadow: 0px 4px 0px #36B8C8; }
nav ul li.active:after a {
color: #204E76; }
nav div a {
text-align: left;
position: relative;
padding-left: 70px;
font-weight: 600;
font-size: 3.8rem;
font-family: "Raleway", sans-serif;
color: #337ab7;
float: left; }
nav div a:hover, nav div a :active, nav div a :focus {
color: #204E76;
text-decoration: none;
cursor: hand; }