tutorials.de - submenu left=0 für Hintergrund, aber Textposition wie bei left=auto

by SpiceLab

HTML

<div class="pagecontainer">
<nav class="nav-menu" id="main-menu">
				
					<ul>
						
							<li class="sub first">
					
								<a title="The Shoe" href="index.php?id=4">Title1</a>
								
									<div class="submenu">
										<ul class="lvl1">
											
												
													<li class="subItem.class">
														<a title="Benefits" href="index.php?id=12">Title1.1</a>
													</li>
												
													<li class="subItem.class">
														<a title="Technology" href="index.php?id=13">Title1.2</a>
													</li>
												
											
										</ul>
									</div>
								
							</li>
						
							<li class="">
					
								<a title="Collection" href="index.php?id=5">Title2</a>
								
							</li>
						
							<li class="">
					
								<a title="Shops" href="index.php?id=6">Title3</a>
								
							</li>
						
							<li class="">
					
								<a title="Online Shops" href="index.php?id=7">Title4</a>
								
							</li>
						
							<li class="active current sub">
					
								<a title="Company" href="index.php?id=9">Title5</a>
								
									<div class="submenu">
										<ul class="lvl1">
											
												
													<li class="subItem.class">
														<a title="News" href="index.php?id=8">Title5.1</a>
													</li>
												
											
										</ul>
									</div>
								
							</li>
						
							<li class="last">
					
								<a title="Contact" href="index.php?id=10">Title6</a>
								
							</li>
						
						
					</ul>				
			</nav>      
</div>
<p>Test bzgl. Clearing</p>

CSS

.pagecontainer {
  width: 1000px;
  margin 50px 0 50px 0;
  position: relative;
}
.main-menu {
	float: left;
}

nav:after {
  content: "";
  display: table;
}

nav:after {
  clear: both;
}

nav {
  border-bottom:20px solid #ececed
}

nav#main-menu > ul {
	margin: 0;
	padding: 0;
}

nav#main-menu .lvl1 {
	list-style-type: none;
}

nav#main-menu .submenu {
	display: none;
	position: absolute;
	/*background: #ececed;*/
	width: 100%;
	/*left: 0;*/
}

nav#main-menu ul.lvl1 > li {
	float: left;
}

nav#main-menu > ul > li {
	list-style-type: none;
	float: left;
	margin-left: -3px;
	padding: 50px 0px 0px 0px;
}

nav#main-menu > ul > li > a {
    display: inline-block;
    padding: 4px 20px 4px 20px;
	border-left: 3px solid #ececed;
	border-right: 3px solid #ececed;
	font-weight: 600;
}
nav#main-menu > ul > li:hover {
	background: #ececed;
}

nav#main-menu > ul > li:hover > .submenu {
	display: block;
}


nav#main-menu > ul > li.first a {
	border-left: none;
}
nav#main-menu > ul > li.last a {
	border-right: none;
}