Example 1 demonstrates my goal, but it's challenging to set a fixed width for .sub due to the addition of new items. The width needs to adjust accordingly.
However, when no width is specified, Example 2 displays the result.
Are there any methods to allow .sub items to expand while keeping the horizontal layout?
.wrap, .wrap2 {
width: 100px;
}
.container {
width:100%;
background: #ccc;
}
.item {
position:relative;
}
.sub {
background: #eee;
position: absolute;
left:100px;
top:0;
width: 340px;
}
.sub li {
display:inline-block;
border-left: 1px solid black;
padding: 0 10px;
&:first-child {
padding: 0 10px 0 0;
border-left:0;
}
}
.wrap2 .sub {
width:auto;
}<h4>Example1. This is what I want. But, without setting width to .sub</h4>
<div class="wrap">
<div class="container">
<ul>
<li class="item item1">
<a href="">hello</a>
<ul class="sub">
<li class="item item1">hello world</li>
<li class="item item2">world hello</li>
<li class="item item3">foo bar</li>
<li class="item item4">bar foo</li>
</ul>
</li>
<li class="item item2">world</li>
<li class="item item3">foo</li>
<li class="item item4">bar</li>
</ul>
</div>
</div>
<h4>Example2. This is what happens when no width is set to .sub</h4>
<div class="wrap2">
<div class="container">
<ul>
<li class="item item1">
<a href="">hello</a>
<ul class="sub">
<li class="item item1">hello world</li>
<li class="item item2">world hello</li>
<li class="item item3">foo bar</li>
<li class="item item4">bar foo</li>
</ul>
</li>
<li class="item item2">world</li>
<li class="item item3">foo</li>
<li class="item item4">bar</li>
</ul>
</div>
</div>