Css - サブメニューdivを親に拡張しますか？

Question

私はサブ項目を持つドロップダウンメニューを持っています。私はサブメニューを完全に表示することができますwitdhしかし、サブメニュー内のコンテンツはいくつかのポイントをstructedと私はそれを完全にwitdhにすることができませんでした。私はこの写真を底に説明します。だから、サブメニューdivは、左側の他のcolを拡張する必要があります。

.menu { 
 
\t list-style:none; 
 
} 
 
.item { 
 
\t display:inline-block; 
 
\t height:50px; 
 
} 
 
.item a { 
 
\t text-decoration:none; 
 
\t padding:20px; 
 
\t display:inline-block; 
 
\t color:#333333; 
 
\t font-size:14px; 
 
\t border-right:1px #ebedf0 solid; 
 
} 
 
.item a:hover { 
 
\t text-decoration:none; 
 
\t background-color:#f0f3f7; 
 
} 
 
.menu li:hover > a { 
 
\t background-color:#f0f3f7; 
 
} 
 
.item .sub { 
 
\t display:none; 
 
\t width: 100%; 
 
\t padding:0 1000em; 
 
\t margin:0 -1000em; 
 
\t height:200px; 
 
\t position:absolute; 
 
\t background-color:#f0f3f7; 
 
\t z-index:1; 
 
\t box-shadow:0px 6px 20px -8px #999999; 
 
} 
 
.item:hover .sub { 
 
\t margin-top:2px; 
 
\t 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"> 
 
\t \t \t \t <div class="col-lg-2 col-md-6 logo"> 
 
\t \t \t \t \t <a href="index.php" title="Anasayfa"><img src="images/logo.png" alt="Logo" width="170" height="55" /></a> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-lg-7 visible-lg hidden-xs"> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <ul class="menu"> 
 
\t \t \t \t \t \t <li class="item"> 
 
\t \t \t \t \t \t \t <a href="index.php" title="Anasayfa">Anasayfa</a> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li class="item"> 
 
\t \t \t \t \t \t \t <a href="#" title="Kategoriler">Kategoriler <i class="fa fa-caret-down"></i></a> 
 
\t \t \t \t \t \t \t <div class="sub"> 
 
\t \t \t \t \t \t \t \t <div style="width:1000px;"> 
 
\t \t \t \t \t \t \t \t \t cat 
 
           </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li class="item"> 
 
\t \t \t \t \t \t \t <a href="#" title="Geliştirme">Geliştirme</a> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li class="item"> 
 
\t \t \t \t \t \t \t <a href="#" title="Dosyalar">Dosyalar <i class="fa fa-caret-down"></i></a> 
 
\t \t \t \t \t \t \t <div class="sub"> 
 
          dosyalar 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-lg-2 visible-lg"> 
 
\t \t \t \t \t Search 
 
\t \t \t \t </div> 
 
\t \t \t </div>

Answer 1

私が正しくあなたを理解していれば、以下のコードは、あなたの問題を解決する必要があります。 .item .subの余白と余白の値が原因でした。私はまた左を追加しました：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; 
}