響應式下拉式菜單li與最長li的寬度相同

Question

我有這個響應下拉菜單。我的問題是，李氏元素有可能和最長的李氏元素具有相同的寬度嗎？如果是的話，我必須編輯？

我把我的代碼放在jsfiddle上。決定性的部分在底部（WIDE：Nav）。

http://jsfiddle.net/7qLmmswp/1/

HTML：

<nav id="twNav-s1" class="twNav twNav-vertical twNav-left"> 
    <ul> 
     <li> 
     <div class="nav-sep"></div> 
     <a href="#">Blog</a> 
     </li> 
     <li> 
     <div class="nav-sep"></div> 
     <a href="#">About</a> 
     </li> 
     <li> 
     <div class="nav-sep"></div> 
     <a href="#">Media</a> 
     <ul> 
      <li> 
       <div class="nav-sep"></div> 
       <a href="#">Stuff</a> 
      </li> 
      <li> 
       <div class="nav-sep"></div> 
       <a href="#">StuffStuff</a> 
      </li> 
      <li> 
       <div class="nav-sep"></div> 
       <a href="#">StuffStuffStuff</a> 
      </li> 
     </ul> 
     </li> 
     <li> 
     <div class="nav-sep"></div> 
     <a href="#">Contact</a> 
     </li> 
     <li> 
     <div class="nav-sep"></div> 
     </li> 
    </ul> 
</nav> 

CSS：

.twNav { 
    background: rgb(86,107,132); 
    -webkit-box-shadow: 13px 0px 51px -28px rgba(0,0,0,0.75), inset 13px 0px 51px -28px rgba(0,0,0,0.75); 
    -moz-box-shadow: 13px 0px 51px -28px rgba(0,0,0,0.75), inset 13px 0px 51px -28px rgba(0,0,0,0.75); 
    box-shadow: 13px 0px 51px -28px rgba(0,0,0,0.75), inset 13px 0px 51px -28px rgba(0,0,0,0.75); 
    border-right: 1px solid #8aa5c7; 
    position: fixed; 
    opacity: 0.97; 
} 

.twNav a { 
    display: block; 
    color: #fff; 
    font-size:13.5pt; 
    font-weight: 300; 
    text-decoration:none; 
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 1); 
} 

.twNav a:hover { 
    background: #a8b4c4; 
} 

.twNav a:active { 
    background: #a2bada; 
    color: #e4a155; 
} 

.twNav ul { 
    margin-top:32px; 
    padding-left:3px; 
    padding-right:3px; 
} 

/* Orientation-dependent styles for the content of the menu */ 

.twNav-vertical { 
    width: 240px; 
    height: 100%; 
    top: 0; 
    z-index: 1000; 
} 

.twNav-vertical a { 
    border-bottom: 1px solid #8aa5c7; 
    padding: 0.6em; 
} 

/* Vertical menu that slides from the left */ 

.twNav-left { 
    left: -300px; 
} 

.twNav-left.twNav-open { 
    left: 0px; 
} 

.twNav-right.twNav-open { 
    right: 0px; 
} 

/* Transitions */ 

.twNav, 
.twNav-push { 
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; 
    transition: all 0.3s ease; 
} 

/* ============== 
    MOBILE: Menu 
    ============== */ 

.menu-icon { 
    display:block; 
    width: 30px; 
    height: 30px; 
    background: url(../img/menu-icon.png); 
    background:#fff; 
    position:absolute; 
    right:20px; 
    top: 95px; 
    z-index:2; 
} 

.menu-icon:hover { 
    background-color: #444; 
    border-radius: 6px 6px 0 0; 
} 

@media only screen and (min-width: 640px) { 

/* ==================== 
    WIDE: Nav 
    ==================== */ 

    .menu-icon { 
     display: none; 
    } 

    .nav-sep { 
     background-image: url('../img/nav-sep.png'); 
     width:7px; 
     height:30px; 
     float:left; 
    } 

    .twNav { 
     background: transparent; 
     position: absolute; 
     -webkit-box-shadow: none; 
     -moz-box-shadow: none; 
     box-shadow: none; 
     border-right: 0; 
     opacity: 1; 
    } 

    .twNav-vertical { 
     width: 100%; 
     height: 50px; 
     top: 100px; 
     z-index: 1000; 
    } 

    .twNav-vertical a { 
     border-bottom: 0; 
    } 

    .twNav-left { 
     left:auto; 
    } 

    .twNav ul { 
     position:absolute; 
     right:10px; 
     margin-top:auto; 
    } 

    .twNav ul li { 
     display:inline-block; 
     position: relative; 
    } 

    .twNav a { 
     float: left; 
     padding: 0 30px; 
    } 

    .twNav a:hover { 
     background: transparent; 
     color: #d48c3b; 
    } 

    .twNav ul ul { 
     visibility: hidden; 
     position: absolute; 
     top: 100%; 
     left: 0; 
    } 

    .twNav ul li:hover > ul { 
     visibility: visible; 
    } 

    .twNav ul ul ul { 
     border-top: 0 none; 
    } 

    .twNav ul ul li { 
     margin-bottom: -8px; 
    } 

    .twNav ul ul li:first-child > a { 
     border-top: 1px solid #305179; 
    } 

    .twNav ul ul li:hover > a { 
     background: #627b99; 
     color: #d48c3b; 
    } 

    .twNav ul ul a { 
     background: #305179; 
     padding: 12px 20px;    
     -webkit-box-shadow: 0 7px 23px -6px rgba(0, 0, 0, 0.75), 0 33px 24px -31px rgba(255, 255, 255, 0.45) inset; 
     -moz-box-shadow: 0 7px 23px -6px rgba(0, 0, 0, 0.75), 0 33px 24px -31px rgba(255, 255, 255, 0.45) inset; 
     box-shadow: 0 7px 23px -6px rgba(0, 0, 0, 0.75), 0 33px 24px -31px rgba(255, 255, 255, 0.45) inset; 
     -moz-border-radius: 0 0 3px 3px; 
     -webkit-border-radius: 0 0 3px 3px; 
     border-radius: 0 0 3px 3px; 
    } 

    .twNav ul ul li .nav-sep { 
     display:none; 
    } 

Answer 1

在這個線程我發現剛纔那是不可能的。但有一個解決方案，幫助我。我用jQuery做了。

set all nested li's to be width of widest li

這裏是我的示例：http://jsfiddle.net/0cny47a9/2/

這是我的腳本：

$(document).ready(function(){ 

    $("#menu-header-menu > li > ul").each(function() { // Loop through all the menu items that got submenu items 

    var Widest=0; // We want to find the widest LI... start at zero 
    var ThisWidth=0; // Initiate the temporary width variable (it will hold the width as an integer) 
    var ParentWidth=0; // Width of Parent li 

     ParentWidth=parseInt($(this).css('width')); // Grab the width of the Parent LI 
     $($(this).children()).each(function() { // Loop through all the children LIs in order to find the widest 
      ThisWidth=parseInt($(this).css('width')); // Grab the width of the current LI 

     if (ThisWidth>Widest) { // Is this LI the widest? 
       Widest=ThisWidth; // We got a new widest value 
       if (Widest<ParentWidth) { 
        Widest=ParentWidth; 
       } 
      } 
     }); 

     $("#menu-header-menu > li > ul > li > ul").each(function() { 
      $(this).children().css('width',ParentWidth); 
     }); 

     Widest+='px'; // Add the unit 
     $(this).children().css('width',Widest); 
    }); 

}); 

Answer 2

您可以添加一個類像下拉菜單的<a>標籤： 「菜單項目」，然後設置一個固定的寬度給他們，例如：100px;

示例here。

HTML：

<li> 
    <div class="nav-sep"></div> 
    <a href="#" class="menu-item">Stuff</a> 
</li> 
<li> 
    <div class="nav-sep"></div> 
    <a href="#" class="menu-item">StuffStuff</a> 
</li> 
<li> 
    <div class="nav-sep"></div> 
    <a href="#" class="menu-item">StuffStuffStuff</a> 
</li> 

CSS：

.menu-item { 
    width:100px; 
}