html – How can I create a nested ul items inside li to align side by side


I’m trying to create a “dropright” css but I’m unable to make the nested ul to behave well

this is my mark up

 <div class="container">
        <ul class="ul-items">
          <li>
          <li>Item one</li>
          <li>Item one</li>
          <li>Item one</li>
          <li>Item one</li>
          <li>Item one</li>
          <ul class="ul-items">
            <li>Item one</li>
            <li>Item one</li>
            <li>Item one</li>
            <li>Item one</li>
            <li>Item one</li>
          </ul>
          </li>
        </ul>
</div>

and my css:

.container{
  display: flex;
  position: relative;
}
.container: first-child{
  left:0;
margin-left:0px;
}
.ul-items{
  list-style: none;
  position: absolute;
  top: 0;
  left: 100px;
  width: 100px;
}

This comes out the way I want but, I can’t set the margin of the first ul so as not to have the 100px what am I doing wrong?

here is the pen:
codepen



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here