drop down menu - css sub child ul width of its child, not parent -

i've got menu multiple child elements, problem i'm having child menu displaying width of parent, not child element.

here's code:

#navbar ul {      float: none;      margin: 0;      padding: 0  }  #navbar ul li {      margin: 0;      padding: 0;      display: inline-block  }  #navbar ul li > a,  #navbar ul li > span {      color: #004665;      padding: 10px 0 10px 35px;      margin: 0;      display: block;      font-family: 'roboto-condensed', sans-serif;      font-weight: 700;      font-size: 24px;      text-transform: uppercase;      line-height: 72px  }  #navbar ul li.active > a,  #navbar ul li > a:hover,  #navbar ul li > a:focus {      color: #6fbfe6;      background: none  }  #navbar ul li > ul {      position: absolute;      background: #f0f5f7;      padding: 30px 0 20px;      border-top: solid 2px #b1b1b1;      display: none  }  #navbar ul li > ul li {      display: block;      margin: 0;      padding: 0;      white-space: nowrap  }  #navbar ul li > ul li > {      font-size: 20px;      line-height: normal;      margin: 0;      padding: 0 30px 10px;      white-space: nowrap  }  #navbar ul li > ul li > ul {      left: 100%;      right: 0;      z-index: 1000;      top: -32px;      width: 100%  }  #navbar ul li > ul li > ul li.parent:hover > ul {      display: block  }

<ul>      <li class="item-120 parent">          <a href="/">academics</a>          <ul class="nav-child">              <li class="item-204 parent"><a href="/">ib programmes</a>              <li class="item-205 parent">                  <a href="/">vce</a>                  <ul class="nav-child">                      <li class="item-215"><a href="/">vce overview</a></li>                      <li class="item-216"><a href="/">outcomes , sacs</a></li>                      <li class="item-217"><a href="/">assessment , scoring</a></li>                      <li class="item-218"><a href="/">subjects offer</a></li>                      <li class="item-219"><a href="/">who vce for?</a></li>                  </ul>              </li>              <li class="item-205 parent"><a href="/">student wellbeing</a>              <li class="item-207 parent"><a href="/">resource library</a>          </ul>      </li>  </ul>

fiddle here: https://jsfiddle.net/fw16jw1y/

remove width: 100% , right: 0 following code:

#navbar ul li > ul li > ul {     left: 100%;     right: 0;   /* remove */     z-index: 1000;     top: -32px;     width: 100%  /* remove */ } 

you containing ul element defining width.

working fiddle