Style des onglets

Question

Bonne journée à tous
Je suis en train de créer un onglet à plusieurs niveaux et j'ai eu un problème avec le stylisme.
Ici j'ai ma liste non ordonnée avec 2 niveaux

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

... etc ... Et je que mon jQuery

$(function() { 
    $(".links2lvl a").click(function(){ 
     $(".links2lvl li").siblings("li").removeClass("active2"); 
     $(this).parent("li").addClass("active2"); 
    }); 
}); 
$(function(){ 
    $(".links2lvl").hide(); 
    $(".links1lvl li").click(function(){ 
     $(this).children(".links2lvl").toggle(); 

    }); 
}); 

Et bien sûr, 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 ... 

maintenant l'idée derrière cela que, après avoir cliqué sur l'onglet parent, tous ses enfants apparaîtront. Après avoir cliqué sur un autre onglet parent, les onglets actuels seront de nouveau masqués et les onglets enfants de cet onglet respectif s'afficheront. Maintenant que ça marche, mais ..
1. Le problème est, quand j'essaie de styler l'onglet parent, il s'appliquera automatiquement à tous ses enfants.
2. le problème est, positionnement des onglets d'enfants. Maintenant, ils apparaissent sous les onglets parents, mais ils déplacent les autres onglets parents sur le côté. J'ai besoin de ça pour arrêter ..
https://jsfiddle.net/lone_wanderer/9d4a0kLs/ Alors voici mon jsfiddle. Vous pouvez voir ici, que les onglets bleus sont les onglets parent et vert sont les onglets enfants. Par défaut, seuls les onglets bleus sont visibles et après les avoir cliqués, leurs onglets enfants respectifs s'afficheront. J'ai besoin cependant qu'ils soient affichés sous la première rangée et au même endroit pour chaque parent.

Answer 1

Ce que vous avez à faire est de placer le second niveau ul à l'extérieur du premier niveau ul's. Donnez-leur des identifiants afin que vous puissiez relier les éléments lvl1 et les sous-éléments 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> 

Avec JQuery, vous saurez quand LVL1 id = "about" est cliqué, id show lvl2 = "about-sous-menu".

$(function(){ 
    $(".links2lvl").hide(); 
    $(".links1lvl li").click(function(){ 
     $(".links2lvl").hide(); 
     var selectedID = ($(this).attr('id')); 
     $('#'+selectedID + '-submenu').toggle(); 
    }); 
}); 

J'ai aussi ajouté un style pour les liens LVL2 ils montrent sous le lvl1 Liens

.links2lvl { 
    clear:both; 
} 

jsFiddle Lien: https://jsfiddle.net/hscf4v8x/1/

Answer 2

1er, votre manque de violon de jquery.
Peut-être que c'est la même raison pour laquelle ils montrent tout au lieu de caché dans votre site de développement.

2ème, Pour l'effet de menu déroulant.

Vous allez changer une partie de votre 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; 
} 

Suppression du trop-plein pour .tabs de laisser la projection de menu déroulant.
Position ajoutée: relative pour le menu 1er niveau, de sorte que la position du second niveau: absolu est en contrôle.
Enfin, ajoutez la position: menu absolu au second niveau, et marge/remplissage pour supprimer l'écart ul.

DEMO