How to Force Nested List Items to Be The Same Width as Parent List Item

How do I force nested list items to be the same width as parent list item?

I did the change on your fiddle. http://jsfiddle.net/BXnxc/2/

The parent li needs to have position:relative; and the nested submenu has to have width:100%; and position:absolute;

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

To make all of the list items the same length as the longest, you will need to manually set the widths. There is no pure CSS method of achieving this automatically as far as I know.

li{width:100%} Will make the list items fill the width of their container. If that is not set, then it will be the width of the user's browser window.

Make nested list item have a fluid width

.menus > nav > ul > li > ul > li > ul > li {
    display: inline-block;
    width: auto;
    white-space: nowrap; // add this
}

Struggling to make nested anchor same size as parent line item

Since the list items don't have explicit width and/or height, we can't change the size of anchor tags properly to fill entire space of each list.

However, you could simply achieve that by adding the padding on anchor tags instead of the list items:

EXAMPLE HERE

.dropdown ul li {
    /* padding: 7px 10px; */ /* Remove this declaration */
    border: none;
    border-right:2px solid lightblue;
    background-color: transparent;
}

.dropdown ul li a {
    display: block;
    padding: 7px 10px; /* Add this instead */
}

Forcing li elements to inherit the full width of their containers

Remove the float:left; from .menu__inner and add a padding of 1-5px or whatever you see fit.

Your code:

.menu__inner {
    list-style: none;
    font-size: 1.3em;
    margin: 0;
    float:left;
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 0;
    -webkit-transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1);
    transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}

The edited code:

.menu__inner {
    list-style:none;
    padding-left:5px; /* added a padding */
    font-size: 1.3em;
    margin: 0;
    /* removed float:left */
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 0;
    -webkit-transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1);
    transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}

Hope this helps!

Hover on child li should take full background width of parent

You can fix this by adding

 padding-inline-start: 0;

to your ul, updated fiddle:

ul {  list-style:none;   padding-inline-start: 0;}.child {  padding-left:25px;}
li {  line-height:1.5;  border-bottom:0.5px solid wheat;  cursor:pointer;}li:hover.child {  background:red;}.ol {  border-bottom:0.5px solid red;}.ol:hover {   background:blue;}

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>JS Bin</title></head><body>      <ul>    <li class="dept">       <div class="ol"> Abc </div>      <ul>        <li class="child"><a><spa>123</span></a></li>        <li class="child"><spa>456</span></a></li>        <li class="child"><spa>789</span></a></li>      </ul>    </li>    <li class="dept">Efg</li>  </ul>

</body></html>

How to set percentage width for a nested element not of direct parent but of parent's parent?

That can be done with CSS, where you set position: relative to the outermost div and position: absolute to the innermost.

Doing like that the innermost relates its position and size to the outermost

Updated

To position the innermost next to the middle div, use this for its left position: left:'+ util +'%;

<div>"sfin" is 50%</div>
<table>  <tr>    <td id="tnum">      <div style="height: 20px; width: 100px; position: relative;">        <div id="did" style="height: 20px;float:left;color: rgb(255, 255, 255);background-color: red; font-weight: bold;font-family: Arial Black; width:50%;overflow: hidden;">          weekno.TotalUtilization          <div style="position: absolute; top:0; left: 50%; height: 20px; background-color: rgb(102,197,232);width:50%;"></div>        </div>      </div>    </td>  </tr></table>
<div>"sfin" is 25%</div>
<table>  <tr>    <td id="tnum">      <div style="height: 20px; width: 100px; position: relative;">        <div id="did" style="height: 20px;float:left;color: rgb(255, 255, 255);background-color: red; font-weight: bold;font-family: Arial Black; width:50%;overflow: hidden;">          weekno.TotalUtilization          <div style="position: absolute; top:0; left: 50%; height: 20px; background-color: rgb(102,197,232);width:25%;"></div>        </div>      </div>    </td>  </tr></table>