Third level drop down css wont show & content/links are out of order?

Question

Some of the sub menu links of the third level are being shown in the second level while some of the second level content are not shown at all. On top of that, I don't know how to get the third level to appear at all. I'm sorry, I'm very new to this.

HTML:

<ul>
    <li>Home</li>
    <li>Bio</li>
    <li>Portfolio
        <ul>
            <li>Design</li>
            <ul>
                <li>Illustartor</li>
                <li>InDesign</li>
                <li>Photoshop</li>
            </ul>
            <li>Media</li>
            <ul>
                <li>Photography</li>
                <li>Video</li>
            </ul>
            <li>Traditional</li>
            <ul>
                <li>Paintings</li>
                <li>Drawings</li>
            </ul>
        </ul>
    </li>
    <li>FAQ</li>
    <li>Contact</li>
</ul>

CSS:

ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  top: 400px;
  index-z: 3;

}
ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  width: 141px;
}
ul li:hover {
  background: #555;
  color: #fff;
   -webkit-transition: delay .5s ease-in-out;
        -moz-transition: delay .5s ease-in-out;
        -o-transition: delay .5s ease-in-out;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;

}
ul li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

li ul li ul{   /* Third Level & beyond ***********/
    display:none;
    background:#55aa7f;
}
li ul li:hover ul{
    display:block;
    position:absolute;
    left:100%;
    border-left:solid 3px #fff;
    top:0;
    width:auto;
}
li ul li ul li{
    display:block;
    padding:3px 10px;
    border-top:solid 3px #fff;
    white-space:nowrap;
}
li ul li ul li:hover span{
    color:#fff;
    }

.levelThreeAlign{position:relative;}

Answer 1

You have closed each list item in the submenu before the ul for the sub-submenu.
html should look like this fiddle:

<ul>
    <li>Home</li>
    <li>Bio</li>
    <li>Portfolio
        <ul>
            <li>Design
                <ul>
                    <li>Illustartor</li>
                    <li>InDesign</li>
                    <li>Photoshop</li>
                </ul>
            </li>
            <li>Media
                <ul>
                    <li>Photography</li>
                    <li>Video</li>
                </ul>
            </li>
            <li>Traditional
                <ul>
                    <li>Paintings</li>
                    <li>Drawings</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>FAQ</li>
    <li>Contact</li>
</ul>

I have changed some of the css in the fiddle as well utilizing direct descendent selectors. Inheritance is very important here. when you style ul li { that will cascade down to ul li ul li { as you are styling all li that are children of a ul. doesn't matter how many levels deep.