如何使下拉菜單的子菜單寬度等於父div與js

Question

我有一個CSS和HTML下拉菜單，我想保持我的子菜單的寬度等於他們的父母。我嘗試了幾種方法，但沒有爲我工作。如果可能的CSS或JS的罰款，我在這裏是我的代碼

HTML

<nav> 
    <ul class="navi_main"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a> 
      <ul class="sub_navi_main"> 
       <li><a href="#">Page 1</a></li> 
       <li><a href="#">Page 2</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Products</a> 
      <ul class="sub_navi_main"> 
       <li><a href="#">Prod 1</a></li> 
       <li><a href="#">Prod 2</a></li> 
      </ul>       
         </li> 
     <li><a href="#">About Us</a></li> 
     <li><a href="#">Contact Us</a></li> 
    </ul> 
</nav> 

CSS

.navi_main{ 
    display:block; 
} 

.navi_main li{ 
    display: table-cell; 
    z-index: 100; 
} 

.navi_main li:first-child{ 
margin-left:0; 
} 

.navi_main li a { 
    text-decoration: none; 
    display: block; 
    font-size: 16px; 
    color: #8098b1; 
    padding: 0 14px; 
    height: 64px; 
    line-height: 64px; 
    border-right: 1px solid #e6e6e6; 
    transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    -webkit-transition: all 0.3s; 
    text-shadow: 0 1px 1px rgba(255,255,255,.64); 
    text-transform: uppercase; 
    position: relative; 
} 

.navi_main li a:hover, .navi_main li:hover > a{ 
    color:#ffffff; 
    background:#9CA3DA; 
} 


.navi_main ul { 
    display: none; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    position:relative; 
    background: #ffffff; 
    z-index:999999; 
} 

.navi_main ul li { 
    display:block; 
    float: none; 
    background:none; 
    margin:0; 
    padding:0; 
} 
.navi_main ul li a { 
    font-size: 14px; 
    font-weight: normal; 
    display: block; 
    color: #797979; 
    border-left: 3px solid #ffffff; 
    background: #ffffff; 
    height:40px; 
    line-height:40px; 
} 

.navi_main ul li a:hover, .navi_main ul li:hover > a{ 
    background:#f0f0f0; 
    border-left:3px solid #9CA3DA; 
    color:#797979; 
} 

.navi_main li > ul.visible{ 
    display: block; 
    position:absolute; 
} 
.navi_main ul ul { 
    left: 149px; 
    top: 0px; 
} 

Answer 1

OK ......我已經簡化了CSS這樣做是否有點像你有一些reduntant規則在那裏，並使CSS選擇器更多特定，我認爲這是你在找什麼。

注意：如果你想多行文本，你真的不能設置line-height等於height。我把所有的高度聲明，並讓鏈接大小（填充）確定實際heigts。

我已經使其中一個子菜單可見，所以你不必懸停看到它。

* { 
 
    box-sizing: border-box; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
.navi_main { 
 
    /* display: block;*/ 
 
    /* not required */ 
 
} 
 

 
.navi_main > li { 
 
    display: table-cell; 
 
    position: relative; 
 
    /* positioning context */ 
 
} 
 

 
.navi_main > li > a { 
 
    text-decoration: none; 
 
    display: block; 
 
    font-size: 16px; 
 
    color: #8098b1; 
 
    padding: 16px; 
 
    border-right: 1px solid #e6e6e6; 
 
    transition: all 0.3s; 
 
    -moz-transition: all 0.3s; 
 
    -webkit-transition: all 0.3s; 
 
    text-shadow: 0 1px 1px rgba(255, 255, 255, .64); 
 
    text-transform: uppercase; 
 
} 
 

 
.navi_main li a:hover, 
 
.navi_main li:hover > a { 
 
    color: #ffffff; 
 
    background: #9CA3DA; 
 
} 
 

 
.navi_main li > ul { 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    display: none; 
 
    width: 100%; 
 
    background: #ff0000; 
 
} 
 

 
.navi_main li:hover > ul { 
 
    display:block; 
 
} 
 

 
.navi_main ul > li { 
 
    display: block; 
 
    background: #bada55; 
 
} 
 

 

 
.navi_main ul > li > a { 
 
    font-size: 14px; 
 
    font-weight: normal; 
 
    display: block; 
 
    color: #797979; 
 
    background: #ffffff; 
 
    padding:8px 16px; 
 
    border-left:2px solid white; 
 
} 
 

 
.navi_main ul li a:hover { 
 
    background: #f0f0f0; 
 
    color: #797979; 
 
    border-left:2px solid #9CA3DA; 
 
} 
 

 
.navi_main li > ul.visible { 
 
    display: block; 
 
}

<nav> 
 
    <ul class="navi_main"> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">About</a> 
 
      <ul class="sub_navi_main"> 
 
       <li><a href="#">Page 1</a></li> 
 
       <li><a href="#">Page 2</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Products</a> 
 
      <ul class="sub_navi_main visible"> 
 
       <li><a href="#">Lorem ipsum dolor sit amet.</a></li> 
 
       <li><a href="#">Prod 2</a></li> 
 
      </ul>       
 
         </li> 
 
     <li><a href="#">About Us</a></li> 
 
     <li><a href="#">Contact Us</a></li> 
 
    </ul> 
 
</nav>

Codepen Demo