如何設置絕對定位下拉菜單的寬度以適合最長的列表項目？

我有一個2下拉列表頭。下拉菜單位置對於包裝容器是絕對的。我希望每個下拉菜單寬度都適合最長列表條目的大小。我想知道是否有任何解決方案沒有循環通過李s和實現它只使用css？如何設置絕對定位下拉菜單的寬度以適合最長的列表項目？

<nav> 
    <div class="nav-dropdownContainer"> 

    <div class="navdropdown nav-primary__dropdown"> 
     <div class="navdropdown__text"> 
     Themes 
     <i class="fa fa-chevron-down">+</i> 
     </div> 

     <ul class="navdropdown__list"> 
     <li class="navdropdown__listItem"><a href="">linktheme1</a></li> 
     <li class="navdropdown__listItem"><a href="">linktheme2</a></li> 
     </ul> 

    </div> 


    <div class="navdropdown nav-primary__dropdown"> 
     <div class="navdropdown__text"> 
     tags 
     <i class="fa fa-chevron-down">+</i> 
     </div> 

     <ul class="navdropdown__list"> 
     <li class="navdropdown__listItem"><a href="">linktag1</a></li> 
     <li class="navdropdown__listItem"><a href="">linktag2</a></li> 
     </ul> 

    </div> 
    </div> 

</nav>

和CSS：

ul{ 
margin: 0; 
padding: 0; 
} 

nav{ 
background-color: grey; 
line-height: 35px; 

} 
.nav-dropdownContainer { 
height: 70px; 
width: 25%; 
display: inline-block; 
position: relative; 
} 

.navdropdown { 
background-color: #455565; 
display: inline-block; 
border-right: 1px solid #fff; 
height: 100%; } 

.navdropdown:first-child { 
border-left: 1px solid #fff; } 

.navdropdown > ul { 
margin: 0; } 

.navdropdown:hover .navdropdown__text { 
color: #fff; } 

.navdropdown.open .navdropdown__text { 
color: #fff; } 

.navdropdown.open .navdropdown__list { 
display: block; } 

.navdropdown .fa-chevron-up, 
.navdropdown .fa-chevron-down { 
padding-left: 1rem; 
font-size: 0.875rem; } 

.navdropdown .navdropdown__text { 
text-align: center; 
cursor: pointer; 
color: #ccc; 
border-top: none; 
padding: 1rem; } 

.navdropdown__list { 
position: absolute; 
top: 100%; 
z-index: 1000; 
display: none; 
float: left; 
width: 100%; 
left: 0; 
background-color: #455565; 
list-style-type: none; } 

.navdropdown__list .navdropdown__listItem { 
width: 100%; 
float: left; 
padding: 1rem; 
background-color: #374350; 
margin: 0; } 

.navdropdown__list .navdropdown__listItem > a { 
text-decoration: none; 
color: #fff; 
cursor: pointer; } 

.navdropdown__list .navdropdown__listItem:hover { 
background-color: #374856; }

JS：

(function() { 
    // Cache DOM 
    var $body = $('body'), 
    $window = $(window), 
    _dropdownClassName = '.navdropdown', 
    $dropdownContainer = $('.nav-dropdownContainer'); 


    $body.on('click', _dropdownClassName, toggleDropdown); 



    function closeAllDropdowns(){ 
    $(_dropdownClassName).removeClass('open'); 
    $('.navdropdown__text i').removeClass('fa-chevron-up').addClass('fa-chevron-down'); 
    } 

    /** 
    * toggle dropdown 
    */ 
    function toggleDropdown(){ 

    const $this = $(this); 
    const $thisArrow = $this.find('.navdropdown__text i'); 

    var leftPosition = $this.offset().left - $dropdownContainer.offset().left; 
    console.log('leftPosition', leftPosition); 


    if (window.Modernizr.mq('only screen and (max-width: 64em)')) { 
     $this.find('.navdropdown__list').css('left', 0); 
    }else{ 
     if(leftPosition > 0){ 
     $this.find('.navdropdown__list').css('left', leftPosition+'px'); 
     } 
    } 


    if($thisArrow.hasClass('fa-chevron-down')){ 
     closeAllDropdowns(); 
     $this.addClass('open'); 
     $thisArrow.removeClass('fa-chevron-down').addClass('fa-chevron-up'); 
    }else{ 
     closeAllDropdowns(); 
    } 
    } 

})();

典筆鏈接：http://codepen.io/neginbasiri/pen/Xjgwkx

來源

2016-09-29 Negin Basiri

您可以使用'max-width'如果需要示例告訴我 – SAM

@SAM您能否在代碼中顯示它？謝謝 –

對不起，我的意思是'最小寬度'我會回答你一會兒.. – SAM