当父母在全屏覆盖菜单中保持不变时，如何显示子菜单项？

时间：2019-04-05 09:29:12

标签： javascript html css wordpress 

setNeedsDisplay(_ rect: CGRect)
function openNav() {
  document.getElementById("myNav").style.height = "100%";
}

function closeNav() {
  document.getElementById("myNav").style.height = "0%";
}
.imglogo {
  padding: 5% 15% 5% 10%;
  background-color: rgba(255, 255, 255, 0.72);
  border-radius: 30px 30px 30px 30px;
  box-shadow: -6px -4px 18px 7px #7a77a2;
  background: center center no-repeat:
}

.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.99);
  overflow-y: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 20%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #fff;
  display: block;
  transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
  color: #7a77a2;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@-webkit-keyframes slide-down {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@-moz-keyframes slide-down {
  0% {
    opacity: 0;
    -moz-transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}

@media screen and (max-height: 450px) {
  .overlay {
    overflow-y: auto;
  }
  .overlay a {
    font-size: 20px
  }
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

.submenu1 {
  font-family: gotham-gds;
  font-size: 12px;
  display: none;
}

.submenu2 {
  font-family: gotham-gds;
  font-size: 12px;
  display: none;
}

.submenu3 {
  font-family: gotham-gds;
  font-size: 12px;
  display: none;
}

.submenu4 {
  font-family: gotham-gds;
  font-size: 12px;
  display: none;
}

.submenu5 {
  font-family: gotham-gds;
  font-size: 12px;
  display: none;
}

.small {
  font-size: 16px !important;
}

.overlay-content ul {
  list-style-type: none;
}

.encima li a {
  display: block;
}

.encima li ul {
  position: absolute;
}

.encima li:hover ul,
.encima li:focus ul {
  width: 100%;
  z-index: 5;
}

.encima li ul {
  display: block;
  width: 100%;
}

.encima:hover .submenu1 {
  display: inline-block;
  margin: -7% 0% 0 20%;
  -webkit-animation: slide-down .5s ease-in-out;
  -moz-animation: slide-down .5s ease-out;
  list-style: none;
  text-align: left;
}

.encima:hover .submenu2 {
  display: inline-block;
  margin: -10% 0% 0 30%;
  -webkit-animation: slide-down .5s ease-in-out;
  -moz-animation: slide-down .5s ease-out;
  list-style: none;
  text-align: left;
}

.encima:hover .submenu3 {
  display: inline-block;
  -webkit-animation: slide-down .5s ease-in-out;
  -moz-animation: slide-down .5s ease-out;
  list-style: none;
  margin: -10% 0% 0 30%;
  text-align: left;
}

.encima:hover .submenu4 {
  display: inline-block;
  -webkit-animation: slide-down .5s ease-in-out;
  -moz-animation: slide-down .5s ease-out;
  list-style: none;
  margin: -10% 0% 0 25%;
  text-align: left;
}

.encima:hover .submenu5 {
  display: inline-block;
  -webkit-animation: slide-down .5s ease-in-out;
  -moz-animation: slide-down .5s ease-out;
  list-style: none;
  margin: -10% 0% 0 20%;
  text-align: left;
}

感谢您的提前帮助！我希望孩子出现在右边，而父母不要动，但我不知道我错过了定位属性。

我正在尝试构建一个垂直的全屏覆盖菜单（从徽标图像触发），其中父项具有子菜单项，但是我希望它们显示在“父母栏”的右侧。问题在于，当子元素悬停显示时，下一个父元素会向下移动...

2 个答案:

答案 0 :(得分：1)

您应该将属性position: absolute添加到“子菜单”：

.encima ul {
  position: absolute;
}

答案 1 :(得分：0)

您在HTML结构中犯了错误，请使用ul内的子菜单li并从

更改一个CSS。 
.encima li ul {
    display: none;
    width: 100%;
}


function openNav() {
  document.getElementById("myNav").style.height = "100%";
}

function closeNav() {
  document.getElementById("myNav").style.height = "0%";
}
.imglogo{
        padding: 5% 15% 5% 10%;
    background-color: rgba(255,255,255,0.72);
    border-radius: 30px 30px 30px 30px;
   box-shadow: -6px -4px 18px 7px #7a77a2;
   background: center center no-repeat:
    
}
.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.99);
  overflow-y: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 20%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
 }

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #fff;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #7a77a2;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}
@-webkit-keyframes slide-down {
      0% { opacity: 0; -webkit-transform: translateY(-100%); }   
    100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-moz-keyframes slide-down {
      0% { opacity: 0; -moz-transform: translateY(-100%); }   
    100% { opacity: 1; -moz-transform: translateY(0); }
}
@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}
.submenu1{
    font-family: gotham-gds;
    font-size: 12px;
    display: none;
    }
.submenu2{
    font-family: gotham-gds;
    font-size: 12px;
    display: none;
    }
.submenu3{
    font-family: gotham-gds;
    font-size: 12px;
    display: none;
    }
.submenu4{
    font-family: gotham-gds;
    font-size: 12px;
    display: none;
    }
.submenu5{
    font-family: gotham-gds;
    font-size: 12px;
    display: none;
    }
.small{
    font-size:16px !important;
}
	.overlay-content ul {
    list-style-type: none;
	}
	.encima li a {
    display:block;
	}
	.encima li ul{
    position: absolute;
	}

	.encima li:hover ul, .encima li:focus ul{
    width:100%;
    z-index: 5;
	}
	.encima li ul {
    display: none;
    width: 100%;
    
	}
	.encima:hover .submenu1{
    display:inline-block;
    margin: -7% 0% 0 20%;
    -webkit-animation: slide-down .5s ease-in-out;
    -moz-animation: slide-down .5s ease-out;
    list-style: none;
    text-align: left;
	}    
	.encima:hover .submenu2{
    display:inline-block;
     margin: -10% 0% 0 30%;
    -webkit-animation: slide-down .5s ease-in-out;
    -moz-animation: slide-down .5s ease-out;
    list-style: none;
    text-align: left;
    
   }
   .encima:hover .submenu3{
    display:inline-block;
    -webkit-animation: slide-down .5s ease-in-out;
    -moz-animation: slide-down .5s ease-out;
    list-style: none;
     margin: -10% 0% 0 30%;
    text-align: left;
   }
    .encima:hover .submenu4{
    display:inline-block;
    -webkit-animation: slide-down .5s ease-in-out;
    -moz-animation: slide-down .5s ease-out;
    list-style: none;
    margin: -10% 0% 0 25%;
    text-align: left;
    }
    .encima:hover .submenu5{
    display:inline-block;
    -webkit-animation: slide-down .5s ease-in-out;
    -moz-animation: slide-down .5s ease-out;
    list-style: none;
    margin: -10% 0% 0 20%;
    text-align: left;
}
<div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="overlay-content"> 
    <ul>
        <div class="encima"> 
            <li> <a href="#">Link1</a>
                <ul class="submenu1">
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                </ul>
            </li>
        </div>
        <div class="encima"> 
            <li> <a href="#">Link2</a>
                <ul class="submenu1">
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                </ul>
            </li>
        </div><div class="encima"> 
            <li> <a href="#">Link3</a>
                <ul class="submenu1">
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                </ul>
            </li>
        </div><div class="encima"> 
            <li> <a href="#">Link4</a>
                <ul class="submenu1">
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                </ul>
            </li>
        </div><div class="encima"> 
            <li> <a href="#">Link5</a>
                <ul class="submenu1">
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                </ul>
            </li>
        </div>
    </ul>     
  </div>
</div>

<span style="font-size:28px;cursor:pointer" onclick="openNav()" >
        <div class="elementor-widget-container">
            <a href="#">open menu</a>
        </div>
</span>

相关问题
最新问题