28209 sujets

CSS et mise en forme, CSS3

[Résolu] Boostrap menu et sous menu

Bonjour,
J'utilise boostrap, mes sous menus se mettent tous au meme niveau.

J'aimerai qu'ils mettent les uns en dessous des autres.

Quelqu'un peut il m'aider ?

Merci

http://img11.hostingpics.net/thumbs/mini_591262menuadmin.png 


<div id="main-menu" class="nav navbar-default">
<ul class="nav navbar-nav">
    <li id="menu_solde"><a href="/solde">Solde / Balance</a></li>
    <li id="menu_import"><a href="/import">Import</a></li>  
    <li id="menu_adminsitration" class="dropdown active">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#" aria-expanded="false">Administration<b class="caret"></b> </a>
        <ul class="dropdown-menu">
            <li><a href="/identifiants">Identifiants</a></li>
            <li><a href="/emballages">Emballages</a></li>
        </ul>
    </li>
</ul>
</div>



#main-menu li {
    background-color: #95c11f;
    display: table-cell;
    width: 1%;
    float: none;
    border-bottom-left-radius: .75em;
    border-bottom-right-radius: .75em;
}
#main-menu li a {
    font-weight: normal;
    text-align: center;
    color: #FFF;
    font-size: 15px;
    border-left: 1px solid rgba(255, 255, 255, 1);
    border-right: 1px solid rgba(255, 255, 255, 1);
    line-height: 10px;
    white-space: nowrap;
}

Modifié par neka (26 Feb 2016 - 15:17)
Modérateur
Hello,

Tu dois simplement mieux cibler tes <li> de premier niveau sinon ton display="table-cell" s'appliquera aussi aux <li> (sous-enfants y compris).

Voici un exemple.
J'ai utilisé le sélecteur d'enfant direct ">" pour s’arrêter au premier niveau de <li>
Sujet clos
Aller à