Css - 将子菜单div扩展到父级？

Question

我有一个包含子项目的下拉菜单。我可以完全显示子菜单，但在子菜单中的 div 内容有点牵强，我无法使其完全显示。我在底部的这张图片中解释它。所以子菜单div需要在左侧扩展其他col。

.menu {
	list-style:none;
}
.item {
	display:inline-block;
	height:50px;
}
.item a {
	text-decoration:none;
	padding:20px;
	display:inline-block;
	color:#333333;
	font-size:14px;
	border-right:1px #ebedf0 solid;
}
.item a:hover {
	text-decoration:none;
	background-color:#f0f3f7;
}
.menu li:hover > a {
	background-color:#f0f3f7;
}
.item .sub {
	display:none;
	width: 100%;
	padding:0 1000em;
	margin:0 -1000em;
	height:200px;
	position:absolute;
	background-color:#f0f3f7;
	z-index:1;
	box-shadow:0px 6px 20px -8px #999999;
}
.item:hover .sub {
	margin-top:2px;
	display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
				<div class="col-lg-2 col-md-6 logo">
					<a href="index.php" title="Anasayfa"><img src="images/logo.png" alt="Logo" width="170" height="55" /></a>
				</div>
				<div class="col-lg-7 visible-lg hidden-xs">
					
					<ul class="menu">
						<li class="item">
							<a href="index.php" title="Anasayfa">Anasayfa</a>
						</li>
						<li class="item">
							<a href="#" title="Kategoriler">Kategoriler <i class="fa fa-caret-down"></i></a>
							<div class="sub">
								<div style="width:1000px;">
									cat
                                </div>
							</div>
						</li>
						<li class="item">
							<a href="#" title="Geliştirme">Geliştirme</a>
						</li>
						<li class="item">
							<a href="#" title="Dosyalar">Dosyalar <i class="fa fa-caret-down"></i></a>
							<div class="sub">
                            dosyalar
							</div>
						</li>
					</ul>
				</div>
				<div class="col-lg-2 visible-lg">
					Search
				</div>
			</div>

Answer 1

如果我理解正确，下面的代码应该可以解决您的问题。 .item .sub 上的填充和边距值是罪魁祸首。我还添加了 left: 0px 以使其左对齐。

.item .sub {
    display: none;
    width: 100%;
    padding: 0;
    margin: 0;
    height: 200px;
    position: absolute;
    background-color: #f0f3f7;
    z-index: 1;
    box-shadow: 0px 6px 20px -8px #999999;
    left: 0px;
}