Html 第三级下拉css不会显示&内容/链接出现问题？

第三级的一些子菜单链接显示在第二级中，而第二级的一些内容根本不显示。除此之外，我根本不知道如何让第三级出现。对不起，我对这个很陌生

HTML:

---

您已在子菜单的ul之前关闭子菜单中的每个列表项。 html应该如下所示：

---

我已经改变了小提琴中的一些css以及使用直接后代选择器。继承在这里非常重要。当你设计ul-li{时，它将级联到ul-li-ul-li{当您为所有ul子级的li设置样式时，不管其深度有多深。

您是否能够粘贴它正在执行的操作的屏幕截图？这将非常有用。您不能将ul标记作为ul标记的子级。您确定吗？我似乎记得以前这样做没有任何问题。@user3612261这看起来像您所做的吗你看到了吗？在dmikester1的提琴之后，如果你在li中添加ul而不是ul，正如乌特卡诺斯所说，有一个3级下拉菜单可用。

<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>

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;}

<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>