Html 在列表中选择li

名单：

第一个将隐藏每个下拉项。第二个将匹配父级的子级ul#nav ul li:hover，如果是，则显示：block，下拉列表可见

现在，因为当悬停一个项目时，其中的项目将简单地列在下面，这不是我想要实现的。我想将项目1-1-1和项目1-1-2移动到项目1-1的右侧，项目1-1-1需要在右侧，项目1-1-2将在其下方（作为下拉列表）。我不确定如何选择该元素。 例如：

以下是我目前得到的信息：

我试过和第一个孩子一起，比如：

#nav ul ul {
    display: none;
}

#nav ul li:hover > ul {
    display: block;
}

我还尝试使用绝对位置和相对位置，它几乎给了我想要的结果，但我无法抓住第一个项目

一定有更好的办法

---

我如何选择它？我如何做出与上面描述的类似的行为？

为什么不使用链接页面的css/html，而不是尝试重新创建它

HTML:

---

回顾这把小提琴

我使用

位置：绝对
作为子菜单：

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a>
            <ul>
                <li><a href="#">Photoshop</a></li>
                <li><a href="#">Illustrator</a></li>
                <li><a href="#">Web Design</a>
                    <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Articles</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">User Experience</a></li>
            </ul>
        </li>
        <li><a href="#">Inspiration</a></li>
    </ul>
</nav>

为了升级代码，您可以为菜单的每个级别分配一个类，如

#nav ul li ul li ul {
  position:absolute;
  top:0;
  left:100%;
}


“第一个…”——哪一套的第一个？我不知道你指的是什么。导航ul{display:none；}将隐藏任何嵌套ul。像这样的？
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a>
            <ul>
                <li><a href="#">Photoshop</a></li>
                <li><a href="#">Illustrator</a></li>
                <li><a href="#">Web Design</a>
                    <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Articles</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">User Experience</a></li>
            </ul>
        </li>
        <li><a href="#">Inspiration</a></li>
    </ul>
</nav>

#nav ul li ul li ul {
  position:absolute;
  top:0;
  left:100%;
}

<ul class="Third_level">