Jquery 选项卡级别样式

大家好
我正在制作一个多级选项卡，但我在设计这个该死的东西时遇到了问题。
这是我的无序列表，有两个级别

<section class="tabs">
    <ul class="links1lvl">
        <li><a>About</a>
            <ul class="links2lvl">
                <li><a href="#about/who">O nás</a></li>
                <li><a href="#about/personal">Personál</a></li>
        </li>
        <li><a>student</a>
            <ul class="links2lvl">
                <li><a href="student/chart.html">Rozvrhy</a></li>
                <li><a href="student/charts.html">Bloková výuka</a></li>

当然还有CSS

.links1lvl a 
    {
    padding: 5px 10px;
    display: inline-block;
    border-radius: 3px 3px 0px 0px;
    background: blue;
    font-size: 13px;
    color: red;
    transition: all linear 0.15s;
    }
.links2lvl a
    {
    padding: 5px 10px;
    display: inline-block;
    border-radius: 3px 3px 0px 0px;
    background: greenyellow;
    font-size:10px;
    color:orangered;
    transition: all linear 0.15s;
.links2lvl li
    {
    margin: 4px 5px auto 0px;
    float:left;
    list-style: none;
.active2 a
    {
    background: white;
    color:black;
    }
... and much more ...

现在，这背后的想法是，单击父选项卡后，其所有子选项卡都将显示。单击另一个父选项卡后，当前选项卡将再次隐藏，相应选项卡的子选项卡将显示。现在那是妓女，但是
1.问题是，当我尝试设置父选项卡的样式时，它将自动应用于其所有子选项卡
2.问题是，子选项卡的位置。现在它们确实出现在父选项卡下方，但它们会将其他父选项卡移到一侧。我需要停止

---

这是我的JSFIDLE。您可以在这里看到，蓝色选项卡是父选项卡，绿色选项卡是子选项卡。默认情况下，只有蓝色选项卡可见，单击它们后，将显示各自的子选项卡。但是，我需要将它们显示在第一行的下面，并显示在每个父选项卡的相同位置

您需要做的是将第二级ul置于第一级ul之外

给他们id，这样你就可以关联lvl1项目和lvl2子项目

<section class="tabs">
    <ul class="links1lvl">
        <li id="about"><a>About</a></li>
        <li id="student"><a>student</a></li>
    </ul>

    <ul class="links2lvl" id="about-submenu">
        <li><a href="#about/who">O nás</a></li>
        <li><a href="#about/personal">Personál</a></li>
        <li><a href="#about/study">Studijní</a></li>
        <li><a href="#about/iCenter">Informacní c.</a></li>
        <li><a href="#about/helpdesk">Aktuality</a></li>
        <li><a href="#about/practise">Praxe</a></li>
    </ul>
    <ul class="links2lvl" id="student-submenu">
        <li><a href="student/chart.html">Rozvrhy</a></li>
        <li><a href="student/charts.html">Bloková výuka</a></li>
        <li><a href="student/r.changes.html">Zmeny místností</a></li>
        <li><a href="student/teach_info.html">Informace</a></li>
        <li><a href="student/study_info.html">informace 2</a></li>
        <li><a href="student/exams.html">Zkoušky</a></li>
        <li><a href="student/final_exams.html">záverecné zkoušky</a></li>
        <li><a href="student/download.hml">Ke stažení</a></li>
    </ul>

</section>

我还为lvl2链接添加了一个样式，以便它们显示在lvl1链接下面

.links2lvl {
    clear:both;
}

JSIDLE链接：

---

第一，你的小提琴缺少jquery
也许这与它们显示所有内容而不是隐藏在开发站点中的原因相同

第二，用于下拉菜单效果

您需要更改一些css

.tabs       
{
width: 1320px;
display:inline-block; 
background:pink;
/*overflow: auto;*/
margin:auto auto 0 15px;
}

.links1lvl li
{
margin: 0px 5px;
float:left;
list-style: none;
position:relative;
}

.links2lvl{
position: absolute;
top: 100%;
margin:0;
padding:0;
}

删除了.tabs的溢出，使下拉菜单显示
为第一级菜单添加了位置：相对，以便控制第二级位置：绝对。
最后，将position:absolute添加到第二级菜单，并添加边距/填充以消除ul间隙

---

我知道我现在听起来像个忘恩负义的混蛋。首先，我要感谢你花时间回答这个问题。我想弄清楚的是，标签的第二层，我需要它们也是水平的，这样它们就不会覆盖导航下面的内容。因此，在单击父选项卡后，它的所有子选项卡都会在它下面一行显示。

.links2lvl {
    clear:both;
}

.tabs       
{
width: 1320px;
display:inline-block; 
background:pink;
/*overflow: auto;*/
margin:auto auto 0 15px;
}

.links1lvl li
{
margin: 0px 5px;
float:left;
list-style: none;
position:relative;
}

.links2lvl{
position: absolute;
top: 100%;
margin:0;
padding:0;
}