首页 / 技术问答 / Html问答列表 / 问答详情

Html 嵌套的 ul li 错位

我创建了一个小导航菜单，可以保存其他选项.需要打开li元素并显示另一个列表.不幸的是，我的嵌套列表显示在父li旁边，而不是下面.同时，我在那里和这里调整，找不到我的问题，它一定是如此简单，我再也看不到了.

我感谢你的任何暗示.

  var icon = document.getElementById("main-menu-button");
    var icon1 = document.getElementById("icon-top");
    var icon2 = document.getElementById("icon-middle");
    var icon3 = document.getElementById("icon-bottom");
    var nav = document.getElementById('main-menu');

    icon.addEventListener('click', function() {
    icon1.classList.toggle('icon-top');
    icon2.classList.toggle('icon-middle');
    icon3.classList.toggle('icon-bottom');
    nav.classList.toggle('show');
    });


    $('.main-menu-ul ul').hide();
    
    $('.main-menu-li').click(function() {
        $(this).find('ul').slideToggle();
    });
   .icon-1, .icon-2, .icon-3 {
    position: absolute;
    left: 25%;
    top: 50%;
    width: 32px;
    height: 3px;
    background-color: black;
    transition: all 400ms cubic-bezier(.84,.06,.52,1.8);
}

.icon-1 {
    transform: translateY(-8px);
    animation-delay: 100ms;
}
  
.icon-3 {
    transform: translateY(8px);
    animation-delay: 250ms;
}

.icon-1.icon-top {
    transform: rotate(40deg);
}

.icon-2.icon-middle {
    transform: rotate(-40deg);
}

.icon-3.icon-bottom {
    opacity: 0;
}

.hamburger-icon {
    position: absolute;
    height: 60px;
    width: 60px;
    top: 2%;
    left: 1%;
    z-index: 1000;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease-in-out;
    background: rgba(255,255,255,0.2);
}

.hamburger-icon:hover {
    transform: scale(1.2);
    box-shadow: 0px 0px 30px rgba(0,0,0,0.1);
}

.dark-blue {
    position: absolute;
    top: 0;
    left: 0;
    background: #003273;
    height: 100%;
    width: 0%;
    transition: all 500ms cubic-bezier(0.62, 0.04, 0.3, 1.8);
    transition-delay: 50ms;
    z-index: 5;
    opacity: 0;
}
  
.dark-blue.slide {
    width: 25%;
    opacity: 1;
}

h1 {
    position: relative;
    top: 2%;
    left: 0;
    display: flex;
    justify-content: center;
    cursor: pointer;
    color: #757575;
}

nav {
    background: whitesmoke;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    z-index: 10;
    opacity: 0;
    box-shadow: -3px -3px 10px rgba(70,70,70,0.12), 
    3px 3px 15px rgba(70,70,70,0.12);
    transition: all 600ms cubic-bezier(0.62, 0.04, 0.3, 1.56);
    transition-delay: 100ms;
}

nav.show {
    width: 25%;
    opacity: 1;
}

.main-menu-ul {
    position: relative;
    height: fit-content;
    list-style: none;
    text-transform: uppercase;
    color: #757575;
    background: white;
    border-radius: 10px;
    box-shadow: -10px -10px 10px rgba(255,255,255,0.5), 
                 15px 15px 15px rgba(70,70,70,0.12);
    margin: 5vh 10px 10px 10px;
}

.main-menu-li {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 5vh;
    height: fit-content;
    color: #757575;
    transition: 0.3s ease-in-out;
    cursor: pointer;
    padding: 5px 0 5px 0;
    width: calc(100% - 20px);
}

.main-menu-li:hover {
    transform: scale3d(1.05);
}

.span-left {
    display: inline-block;
    width: 20%;
}

.span-middle {
    display: inline-block;
    width: 60%;
}

.span-right {
    display: inline-flex;
    justify-content: center;
    width: 20%;
}

.sub-menu-ul {
   display: inline-block;
   float: none;
   height: 0;
   border: none;
}
<head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>UL Test</title>    
        <!-- fontawesome stylesheet https://fontawesome.com/ -->
        <script src="https://kit.fontawesome.com/98a5e27706.js" crossorigin="anonymous"></script>
        <!-- jQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
     <!-- NAV Begin -->
     <div class="hamburger-icon" id="main-menu-button">
        <div class="icon-1" id="icon-top"></div>
        <div class="icon-2" id="icon-middle"></div>
        <div class="icon-3" id="icon-bottom"></div>
        <div class="clear"></div>
    </div>


<nav id="main-menu">
    <h1>Test</h1>
    
    <ul class="main-menu-ul">
        <li class="main-menu-li">
            <span class="span-left"><i class="fa-solid fa-user"></i></span>
            <span class="span-middle">Login</span>
            <span class="span-right"><i class="fa-solid fa-caret-down"></i></span>
                <ul class="sub-menu-ul">
                    <li>
                        <input type="text" placeholder="Username">
                        <input type="password" placeholder="Password"> 
                    </li>        
                </ul>
        </li>
        <li class="main-menu-li">
            <span class="span-left"><i class="fa-solid fa-magnifying-glass"></i></span>
            <span class="span-middle">Search</span>
            <span class="span-right"><i class="fa-solid fa-caret-down"></i></span>
        </li>
        <li class="main-menu-li">
            <span class="span-left"><i class="fa-solid fa-mountain-sun"></i></span>
            <span class="span-middle">Display Settings</span>
            <span class="span-right"><i class="fa-solid fa-caret-down"></i></span>
        </li>
        <li class="main-menu-li">
            <span class="span-left"><i class="fa-solid fa-gears"></i></span>
            <span class="span-middle">General Settings</span>
            <span class="span-right"><i class="fa-solid fa-caret-down"></i></span>
        </li>
        <li class="main-menu-li">
            <span class="span-left"><i class="fa-solid fa-file-export"></i></span>
            <span class="span-middle">Export</span>
            <span class="span-right"><i class="fa-solid fa-caret-down"></i></span>
        </li>
    </ul>

    <ul class="main-menu-ul">
        <li class="main-menu-li">
            <span class="span-left"><i class="fa-solid fa-info"></i></span>
            <span class="span-middle">Info</span>
            <span class="span-right"><i class="fa-solid fa-caret-down"></i></span>
        </li>
    </ul>
</nav>
</body>

推荐答案

您遇到了与flexbox相关的问题.main-menu-li以下的所有元素都是弹性项目，包括sub ul.

为了解决这个问题，您应该将这些元素按div分隔成main-menu-li个元素，并为div设置flexbox.

var icon = document.getElementById("main-menu-button");
var icon1 = document.getElementById("icon-top");
var icon2 = document.getElementById("icon-middle");
var icon3 = document.getElementById("icon-bottom");
var nav = document.getElementById('main-menu');

icon.addEventListener('click', function() {
  icon1.classList.toggle('icon-top');
  icon2.classList.toggle('icon-middle');
  icon3.classList.toggle('icon-bottom');
  nav.classList.toggle('show');
});


$('.main-menu-ul ul').hide();

$('.main-menu-li').click(function() {
  $(this).find('ul').slideToggle();
});
.icon-1,
.icon-2,
.icon-3 {
  position: absolute;
  left: 25%;
  top: 50%;
  width: 32px;
  height: 3px;
  background-color: black;
  transition: all 400ms cubic-bezier(.84, .06, .52, 1.8);
}

.icon-1 {
  transform: translateY(-8px);
  animation-delay: 100ms;
}

.icon-3 {
  transform: translateY(8px);
  animation-delay: 250ms;
}

.icon-1.icon-top {
  transform: rotate(40deg);
}

.icon-2.icon-middle {
  transform: rotate(-40deg);
}

.icon-3.icon-bottom {
  opacity: 0;
}

.hamburger-icon {
  position: absolute;
  height: 60px;
  width: 60px;
  top: 2%;
  left: 1%;
  z-index: 1000;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.2s ease-in-out;
  background: rgba(255, 255, 255, 0.2);
}

.hamburger-icon:hover {
  transform: scale(1.2);
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
}

.dark-blue {
  position: absolute;
  top: 0;
  left: 0;
  background: #003273;
  height: 100%;
  width: 0%;
  transition: all 500ms cubic-bezier(0.62, 0.04, 0.3, 1.8);
  transition-delay: 50ms;
  z-index: 5;
  opacity: 0;
}

.dark-blue.slide {
  width: 25%;
  opacity: 1;
}

h1 {
  position: relative;
  top: 2%;
  left: 0;
  display: flex;
  justify-content: center;
  cursor: pointer;
  color: #757575;
}

nav {
  background: whitesmoke;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  z-index: 10;
  opacity: 0;
  box-shadow: -3px -3px 10px rgba(70, 70, 70, 0.12),
    3px 3px 15px rgba(70, 70, 70, 0.12);
  transition: all 600ms cubic-bezier(0.62, 0.04, 0.3, 1.56);
  transition-delay: 100ms;
}

nav.show {
  width: 25%;
  opacity: 1;
}

.main-menu-ul {
  list-style: none;
  position: relative;
  /*display: flex;*/ /*Remove this*/
  height: fit-content;
  text-transform: uppercase;
  color: #757575;
  background: white;
  border-radius: 10px;
  box-shadow: -10px -10px 10px rgba(255, 255, 255, 0.5),
    15px 15px 15px rgba(70, 70, 70, 0.12);
  margin: 5vh 10px 10px 10px;
}

.main-menu-li {
  position: relative;
  align-items: center;
  min-height: 5vh;
  height: fit-content;
  color: #757575;
  transition: 0.3s ease-in-out;
  cursor: pointer;
  padding: 5px 0 5px 0;
  width: calc(100% - 20px);
}

/*Added a wrapper with div and made it become flexbox*/
.main-menu-li div {
  display: flex;
}

.main-menu-li:hover {
  transform: scale3d(1.05);
}

.span-left {
  display: inline-block;
  width: 20%;
}

.span-middle {
  display: inline-block;
  width: 60%;
}

.span-right {
  display: inline-flex;
  justify-content: center;
  width: 20%;
}

.sub-menu-ul {
  display: inline-block;
  float: none;
  height: 0;
  border: none;
  list-style: none;
  padding: 0;
}
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <title>UL Test</title>
  <!-- fontawesome stylesheet https://fontawesome.com/ -->
  <script src="https://kit.fontawesome.com/98a5e27706.js" crossorigin="anonymous"></script>
  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
  <!-- NAV Begin -->
  <div class="hamburger-icon" id="main-menu-button">
    <div class="icon-1" id="icon-top"></div>
    <div class="icon-2" id="icon-middle"></div>
    <div class="icon-3" id="icon-bottom"></div>
    <div class="clear"></div>
  </div>


  <nav id="main-menu">
    <h1>Test</h1>

    <ul class="main-menu-ul">
      <li class="main-menu-li">
        <div>
          <span class="span-left"><i class="fa-solid fa-user"></i></span>
          <span class="span-middle">Login</span>
          <span class="span-right"><i class="fa-solid fa-caret-down"></i></span>
        </div>
        <ul class="sub-menu-ul">
          <li>
            <input type="text" placeholder="Username">
            <input type="password" placeholder="Password">
          </li>
        </ul>
      </li>
      <li class="main-menu-li">
        <div>


          <span class="span-left"><i class="fa-solid fa-magnifying-glass"></i></span>
          <span class="span-middle">Search</span>
          <span class="span-right"><i class="fa-solid fa-caret-down"></i></span>
        </div>
      </li>
      <li class="main-menu-li">
        <div>


          <span class="span-left"><i class="fa-solid fa-mountain-sun"></i></span>
          <span class="span-middle">Display Settings</span>
          <span class="span-right"><i class="fa-solid fa-caret-down"></i></span>
        </div>
      </li>
      <li class="main-menu-li">
        <div>


          <span class="span-left"><i class="fa-solid fa-gears"></i></span>
          <span class="span-middle">General Settings</span>
          <span class="span-right"><i class="fa-solid fa-caret-down"></i></span>
        </div>
      </li>
      <li class="main-menu-li">
        <div>


          <span class="span-left"><i class="fa-solid fa-file-export"></i></span>
          <span class="span-middle">Export</span>
          <span class="span-right"><i class="fa-solid fa-caret-down"></i></span>
        </div>
      </li>

    </ul>

    <ul class="main-menu-ul">
      <li class="main-menu-li">
        <div>


          <span class="span-left"><i class="fa-solid fa-info"></i></span>
          <span class="span-middle">Info</span>
          <span class="span-right"><i class="fa-solid fa-caret-down"></i></span>
        </div>
      </li>
    </ul>
  </nav>
</body>

Html相关问答推荐

如何在Vim中删除Html标签？

CURL邮箱中的图像不能调整其大小

如何收集<；p&>元素下的<；p>；子元素

需要帮助创建一个简单的html css网格布局

如何突破安莉得分

为什么根捕获上的`min-height`溢出，而`height`没有？

文本幻灯片显示动画

使自定义图像滑块全宽

30000ms后超时重试：期望找到元素：someElement，但从未找到它

如何将图像放在其内部按钮下方

perl hdb 调试器：浏览器以错误的编码显示 UTF-8 源代码

即使必填字段为空，HTML 表单也已成功提交

为什么溢出时overflow： auto框的底部有一个小间隙？

文本不显示在 div 下方

Angular中如何向单选按钮添加验证

将组件移动到页面底部 Angular

为什么
标签在 Edge 和 Firefox 中的编号会有两种不同的结果？

如何让 Reindeer 居中

调整大小时 CSS 溢出

使用 tailwind css 将 HTML/CSS/JS 站点转换为 React App

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  chrome插件网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  豪评测 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630