html - 响应式下拉菜单子(monad)li与最长li的宽度相同

Question

我有这个响应式下拉菜单。我的问题是，子 li 元素是否可能与最长的子 li 具有相同的宽度？如果是，我必须编辑什么？

我将我的代码放在 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

您可以将类添加到 <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;
}