Question

我有这个响应式下拉菜单。我的问题是，儿童李元素的宽度是否与最长的孩子李一样宽？如果是，我必须编辑什么？

我把我的代码放在jsfiddle上。决定性的部分位于底部（WIDE：Nav）。

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

您可以在下拉菜单的<a>标记中添加一个类，例如：“menu-item”，然后为它们设置固定宽度，例如：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;
}

Answer 2

在这篇主题中，我发现我想要的是不可能的。但有一个解决方案帮助了我。我是用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);
    });

});

响应下拉菜单子li的宽度与最长的li相同

2 个答案: