I've exhausted all possible CSS solutions today in an attempt to make my parent nav tag home-main-nav-menu resize based on its children and grandchildren, but it just won't cooperate. If anyone could provide a clear explanation on how to solve this issue, I would greatly appreciate it. Moreover, an explanation as to why elements don't naturally expand to accommodate their child content would be incredibly helpful. Thank you! [refer to the image and CSS for more details]
$(document).ready(function(){
$('.main-ul').children('li').on('click', function() {
$(this).children('ul').slideToggle('slow');
});
});.home-main-nav-menu{
border-style: double;
border-color: cyan;
}
.A{
display: inline-block;
text-align: center;
padding-left: 5px;
margin-right: 10px;
border-style: double;
border-color: purple;
}
.B{
list-style-type: none;
text-align: left;
margin-left: -40.5px;
}
.A > ul {
display: none;
}
.main-ul{
border-style: double;
border-color: green;
width: 95.5%;
margin-left: -3px;
}
ul{
text-align: center;
position: absolute;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class = "home-main-nav-menu">
<ul class = "main-ul">
<li class = "A"><a href = "#/">a</a></li>
<li class = "A"><a href = "#/">b</a>
<ul>
<li class = "B"><a href = "#/">c</a></li>
<li class = "B"><a href = "#/">d</a></li>
</ul>
</li>
<li class = "A"><a href = "#/">e</a></li>
<li class = "A"><a href = "#/">f</a>
<ul>
<li class = "B"><a href = "#/">f</a></li>
<li class = "B"><a href = "#/">g</a></li>
</ul>
</li>
<li class = "A"><a href = "#/">h</a>
<ul>
<li class = "B"><a href = "#/">i</a></li>
<li class = "B"><a href = "#/">j</a></li>
</ul>
</li>
<li class = "A"><a href = "#/">k</a>
<ul>
<li class = "B"><a href = "#/">l</a></li>
<li class = "B"><a href = "#/">m</a></li>
</ul>
</li>
</ul>
</nav>