Responsive Dropdown Menu child li same width as longest li - html

Question

i have this responsive dropdown menu. My question, is it possible that the child li elements have all the same width as the longest child li? If yes, what i have to edit?
I put my code on jsfiddle. The decisive part is at the bottom (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>
Blog
</li>
<li>
<div class="nav-sep"></div>
About
</li>
<li>
<div class="nav-sep"></div>
Media
<ul>
<li>
<div class="nav-sep"></div>
Stuff
</li>
<li>
<div class="nav-sep"></div>
StuffStuff
</li>
<li>
<div class="nav-sep"></div>
StuffStuffStuff
</li>
</ul>
</li>
<li>
<div class="nav-sep"></div>
Contact
</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

You can add a class to the <a> tags of the dropdown menu like: "menu-item" and then set a fixed width to them, for example: 100px;
Example here.
HTML:
<li>
<div class="nav-sep"></div>
Stuff
</li>
<li>
<div class="nav-sep"></div>
StuffStuff
</li>
<li>
<div class="nav-sep"></div>
StuffStuffStuff
</li>
CSS:
.menu-item {
width:100px;
}

Answer 2

In this Thread i found out that what i wanted is not possible. But there was a solution that helped my. I did it with jquery.
set all nested li's to be width of widest li
Here is my Example: http://jsfiddle.net/0cny47a9/2/
This is my Script:
$(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);
});
});