nested ul li out of position-CodePudding

I created small nav menu which will hold another options. The li element needs to be opened and another list appears. Unfortunately my nested list appears next to the parent li instead of below. Meanwhile I tweaked there and here and can´t find my problem, it must be something so simple which I do not see anymore.

I appreciate any hints.

  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  id="main-menu-button">
        <div  id="icon-top"></div>
        <div  id="icon-middle"></div>
        <div  id="icon-bottom"></div>
        <div ></div>
    </div>


<nav id="main-menu">
    <h1>Test</h1>
    
    <ul >
        <li >
            <span ><i ></i></span>
            <span >Login</span>
            <span ><i ></i></span>
                <ul >
                    <li>
                        <input type="text" placeholder="Username">
                        <input type="password" placeholder="Password"> 
                    </li>        
                </ul>
        </li>
        <li >
            <span ><i ></i></span>
            <span >Search</span>
            <span ><i ></i></span>
        </li>
        <li >
            <span ><i ></i></span>
            <span >Display Settings</span>
            <span ><i ></i></span>
        </li>
        <li >
            <span ><i ></i></span>
            <span >General Settings</span>
            <span ><i ></i></span>
        </li>
        <li >
            <span ><i ></i></span>
            <span >Export</span>
            <span ><i ></i></span>
        </li>
    </ul>

    <ul >
        <li >
            <span ><i ></i></span>
            <span >Info</span>
            <span ><i ></i></span>
        </li>
    </ul>
</nav>
</body>

CodePudding user response：

You have a problem related to the flexbox. All elements under main-menu-li are flex items including your sub ul.

For a fix, you should separate those elements in main-menu-li by divs and set flexboxes for divs instead.

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  id="main-menu-button">
    <div  id="icon-top"></div>
    <div  id="icon-middle"></div>
    <div  id="icon-bottom"></div>
    <div ></div>
  </div>


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

    <ul >
      <li >
        <div>
          <span ><i ></i></span>
          <span >Login</span>
          <span ><i ></i></span>
        </div>
        <ul >
          <li>
            <input type="text" placeholder="Username">
            <input type="password" placeholder="Password">
          </li>
        </ul>
      </li>
      <li >
        <div>


          <span ><i ></i></span>
          <span >Search</span>
          <span ><i ></i></span>
        </div>
      </li>
      <li >
        <div>


          <span ><i ></i></span>
          <span >Display Settings</span>
          <span ><i ></i></span>
        </div>
      </li>
      <li >
        <div>


          <span ><i ></i></span>
          <span >General Settings</span>
          <span ><i ></i></span>
        </div>
      </li>
      <li >
        <div>


          <span ><i ></i></span>
          <span >Export</span>
          <span ><i ></i></span>
        </div>
      </li>

    </ul>

    <ul >
      <li >
        <div>


          <span ><i ></i></span>
          <span >Info</span>
          <span ><i ></i></span>
        </div>
      </li>
    </ul>
  </nav>
</body>