why does parent container stretch on :hover? - html

Question

I'm creating a drop down menu, and having trouble with the :hover pseudoclass. When I hover on an a tag in the menu, the parent container's width stretches to meet...something. What's going on?
Note: the weird use of background-colors is just to give myself a better understanding of how the box model works.
HTML is:
<header>
<h1>test <span>test</span></h1>
<nav>
<ul class="menu">
<li>Menu
<ul class="submenu">
<li>Aaaaa Aaaaa Aaaa</li>
<li>Bbbbb Bbbbb Bbbbb</li>
<li>Ccccc Ccccc Ccccc</li>
</ul>
</li>
</ul>
</nav>
</header>
<section class="content" id="one">
<h2>Aaaa</h2>
<h3>Aaaa</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="content" id="two">
<h2>Bbbb</h2>
<h3>Bbbb</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="content" id="three">
<h2>Cccc</h2>
<h3>Cccc</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<footer>
<ul class="social">
<li><span class="fa fa-twitter fa-2x"></span></li>
<li><span class="fa fa-github fa-2x"></span></li>
<li><span class="fa fa-envelope-o fa-2x"></span></li>
</ul>
</footer>
CSS is:
nav {
position: inherit;
left: 30px;
top: 78px;
}
.menu {
position: inherit;
background-color: yellow;
width: 90%;
}
.menu > li {
float: left;
list-style: none;
display: inline-block;
}
.menu li a {
display: inherit;
padding: 10px;
}
.menu li a:hover {
background-color: black;
color: white;
text-shadow: none;
}
ul.submenu {
display: none;
}
li:hover > ul {
position: inherit;
display: block;
background-color: blue;
}
.submenu li {
padding: 0;
margin: 0;
width: 100%;
}
.submenu li a {
display: inherit;
padding: 10px;
}
.submenu li a:hover:after {
content: "";
color: white;
text-shadow: none;
padding: 0 15px;
}
Here's a demo: http://jsfiddle.net/ur3dettv/

Answer 1

Add position: absolute to the inside ul element.
.menu li ul{
position: absolute;
}
Working Fiddle
In a normal layout, if the child element's height is increased then parent stretches to contain the child element. That is what happening with you in your above code.
The solution is to make the child element independent of its parent container which can be done by using position: absolute css property.

Answer 2

Because on this class
.submenu li a:hover:after {
content: "";
color: white;
text-shadow: none;
padding: 0 15px;
}
you have some padding set. Taking this off fixes your issue. DEMO