HTML/CSS Horizontal navigation submenu hover wrong displayed

Question

I am creating an HTML page with a horizontal navigation and vertical submenu. Everything is working fine, except the fact, that the hover on the submenu is displayed to the left of the actual menu item.

See my jsfiddle: https://jsfiddle.net/qmcte349/

/* Navigation */
nav ul {
	list-style: none;
	background-color: #444;
	text-align: center;
	padding: 0;
	margin: 0;
}

nav li {
	line-height: 40px;
	text-align: left;
	width: 13%;
	border-bottom: none;
	height: 50px;
	display: inline-block;
	margin-right: -4px;
}

nav a {
	font-size: .8em;
	text-decoration: none;
	color: #fff;
	display: block;
	padding-left: 15px;
	border-bottom: none;
}

nav a:hover {
	background-color: #8e2323;
}

nav a.active {
	background-color: #aaa;
	color: #444;
	cursor: default;
}

nav > ul > li {
	text-align: center;
}

nav > ul > li > a {
	padding-left: 0;
}

/* Sub Menus */

nav li ul {
	position: absolute;
	display: none; 
	width: inherit;
}

nav li:hover ul {
	display: block; 
}

nav li ul li {
	display: block; 
}

			<nav>
				<ul>
					<li><a href="index.html">Home</a></li>
					<li><a href="#">Verein</a></li>
					<li><a href="#">Chronik</a></li>
					<li><a href="#">Termine</a>
						<ul>
							<li><a href="#">Veranstaltungen</a></li>
							<li><a href="#">Übungen</a></li>
						</ul>
					</li>
					<li><a href="#">Bilder und Videos</a></li>
					<li><a href="#">Links</a></li>
				</ul>
			</nav>

Thank you for your suggestions!

Answer 1

Your problem goes from setting width to 13%. This way the li in the submenu also is 13% of its parrent width. Another issue you will see with margin-right: -4px; I suggest this code:

nav li {
    line-height: 40px;
    text-align: left;
    border-bottom: none;
    height: 50px;
    display: inline-block;
}


nav > ul > li {
    width: 13%;
  margin-right: -4px;
}

Set the things that are importaint for main menu (menu bar) only to it and not to its children.