如何使子菜单项在全屏覆盖菜单中保持父级保持不变时显示

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;
}

<body>
  <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></li>
          <ul class="submenu1">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </div>
        <div class="encima">
          <li> <a href="#">link2</a></li>
          <ul class="submenu2">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </div>
        <div class="encima">
          <li> <a href="#">Link3</a></li>
          <ul class="submenu3">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </div>
        <div class="encima">
          <li> <a href="#">Link4</a></li>
          <ul class="submenu4">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </div>
        <div class="encima">
          <li> <a href="#">link5</a></li>
          <ul class="submenu5">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </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>
</body>

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

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

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

.encima ul {
  position: absolute;
}

您在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>

相关内容

最新更新

热门标签：