与上述元素相同的 CSS 下划线

Question

I am trying to create the following look:

As you can see on this picture even if there is some padding on the "sub" menu item the border still works.

So here is what I've attempted:

 .menu-ul { list-style-type: none; } .menu-li { padding: 10px 0; border-bottom: 1px solid rgba(50, 50, 50, 0.3); width: 100%; } a { font-family: Titillium Web; font-style: normal; font-weight: 600; font-size: 16px; line-height: 24px; letter-spacing: 0.02em; color: #323232; text-decoration: none; } a:hover { color: #DB091C; } .sub-menu-ul { padding: 0px; list-style-type: none; border-top: 1px solid rgba(50, 50, 50, 0.3); } .sub-menu-li { padding: 10px; width: calc(100% - 20px); border-top: 1px solid rgba(50, 50, 50, 0.3); } hr.solid { border-top: 3px solid #bbb; }

 <link href="https://pro.fontawesome.com/releases/v5.14.0/css/all.css" rel="stylesheet"/> <nav style="width: 300px"> <ul class="menu-ul"> <li class="menu-li"> <a href="" >Title </a> <span style="float: right"><i class="fa fa-angle-down"></i></span> <div style="display: block"> <ul class="sub-menu-ul"> <li class="sub-menu-li"> <a href="#"> Sub menu item2 </a> <span style="float: right"><i class="fa fa-angle-right"></i></span> </li> </li> <li class="sub-menu-li"> <a href="#"> Sub menu item2 </a> </li> </ul> </div> </li> <li class="menu-li"><a href="" >Title 2</a> </li> <li class="menu-li"><a href="" >Title 2</a> </li> </ul> </nav>

But I can't seem to get the border right.

Answer 1

Try this, I have changed the padding for menu-li and width of sub-menu-li

.menu-li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(50, 50, 50, 0.3);
  width: 100%;
}
.sub-menu-li {
  padding: 10px;
  padding-right: 0;
  width: calc(100% - 10px);
  border-top: 1px solid rgba(50, 50, 50, 0.3);
}