My dropdown menu items push each other around - css

Question

I am attempting to make a drop-down menu. My problem is that some of the drop-down items are wider than their parent item. This is causing my other menu items to be displaced. In this case, hovering above "Practice Areas" will displace "About".
Hopefully a css guru can help me with this.
Thanks, CPR
ul {
padding: 0;
}
.main-nav>ul>li {
display: inline-block;
float: left;
padding: 10px;
position: relative;
}
.sub-menu li {
display: none;
position: relative;
top: 0;
left: 0;
}
.main-nav ul li:hover > ul.sub-menu li {
display: block;
}
<div class='main-nav'>
<ul>
<li>Practice Areas
<ul class='sub-menu'>
<li>Consumer Bankruptcy</li>
<li>Personal Injury</li>
</ul>
</li>
<li>About
<ul class='sub-menu'>
<li>Meet us</li>
<li>Testimonials</li>
</ul>
</li>
</ul>
</div>

Answer 1

I've added
.sub-menu {
position: absolute;
}
ul {
padding: 0;
}
.main-nav>ul>li {
display: inline-block;
float: left;
padding: 10px;
position: relative;
}
.sub-menu {
position: absolute;
}
.sub-menu li {
display: none;
position: relative;
top: 0;
left: 0;
}
.main-nav ul li:hover > ul.sub-menu li {
display: block;
}
<div class='main-nav'>
<ul>
<li>Practice Areas
<ul class='sub-menu'>
<li>Consumer Bankruptcy</li>
<li>Personal Injury</li>
</ul>
</li>
<li>About
<ul class='sub-menu'>
<li>Meet us</li>
<li>Testimonials</li>
</ul>
</li>
</ul>
</div>

Answer 2

You need to absolutely position the sub menu....
ul {
padding: 0;
}
.main-nav > ul > li {
display: inline-block;
float: left;
padding: 10px;
position: relative;
}
ul > li > ul {
position: absolute;}
.sub-menu li {
display: none;
}
.main-nav ul li:hover > ul.sub-menu li {
display: block;
}
<div class='main-nav'>
<ul>
<li>Practice Areas
<ul class='sub-menu'>
<li>Consumer Bankruptcy</li>
<li>Personal Injury</li>
</ul>
</li>
<li>About
<ul class='sub-menu'>
<li>Meet us</li>
<li>Testimonials</li>
</ul>
</li>
</ul>
</div>

Answer 3

You can set the width of each li item. I used 30% in the css for .main-nav>ul>li.
.main-nav>ul>li {
display: inline-block;
float: left;
padding: 10px;
position: relative;
width: 30%; <===== added this
}
Of course, this won't work well if you need more than 3 li items in your navigation bar. I would suggest using bootstrap. Here is the bootstrap navbar
ul {
padding: 0;
}
.main-nav>ul>li {
display: inline-block;
float: left;
padding: 10px;
position: relative;
width: 30%;
}
.sub-menu li {
display: none;
position: relative;
top: 0;
left: 0;
}
.main-nav ul li:hover > ul.sub-menu li {
display: block;
}
<div class='main-nav'>
<ul>
<li>Practice Areas
<ul class='sub-menu'>
<li>Consumer Bankruptcy</li>
<li>Personal Injury</li>
</ul>
</li>
<li>About
<ul class='sub-menu'>
<li>Meet us</li>
<li>Testimonials</li>
</ul>
</li>
</ul>
</div>