Comment les différents styles dans une liste imbriquée style?

J'ai une liste et de la liste a liste de.

Je définir des styles sur la liste parent mais je veux des styles différents pour le parent et l'enfant liste, mais ils sont mélangés, de toute façon je ne peux pas les séparer.

Fichier HTML:

<ul id="accountNavigation">
  <li><a href="#">Something</a></li>                    
  <li id="userNavigation">
    <img src="https://si0.twimg.com/profile_images/135460415/UAB_dragon_head_normal.png" alt=""/>
    <a href="#">Username</a>
    <div class="showme">
      <ul id="userNavigationSubMenu">
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>

      </ul>
    </div>
  </li>
</ul>

Fichier CSS:

body{background:#ff0000;}
#accountNavigation{ list-style: none;float: right;height: 44px;}
#accountNavigation li{ float: left;color: #fff;height: 44px;}
#accountNavigation li:hover{ background: #ddd;cursor: pointer;}
#accountNavigation li a{ text-decoration: none;color: #fff;line-height: 44px;font-weight: bold;font-size: 13px;height: 44px;padding: 15px 27px 0 14px;outline: none;}
#accountNavigation li img{ position: absolute;top: 12px;left: 10px;width: 22px;height: 22px;}
#userNavigation{position: relative;}
#userNavigation a {padding-left: 38px !important;}

#userNavigation{}
#userNavigation:hover{}
#userNavigation:hover .showme{display: inline;}
.showme
{
  display: none;
  width: 140px;
  height: 200px;
  background: #f5f5f5;
  margin: 0px auto;
  padding: 10px 5px 0px 5px;
  border: 1px solid #ddd;
  border-top: none;
  z-index: 10;
  position: absolute;
  right:0;
  top: auto;

}
#userNavigation ul { list-style: none;}

C'est violon.

InformationsquelleAutor 1110 | 2012-10-08
  1. 20

    Simplement utiliser le > directe ou immédiate descendant du combinator, et un id pour spécifier les li (ou ul) les éléments que vous ciblez:

    #accountNavigation { /* outer ul element */
}

#accountNavigation > li { /* outer ul element's children li */
}

#accountNavigation > li > ul { /* first 'inner' ul element */
}

#accountNavigation > li > ul > li { /* first 'inner' ul element's li children */
}

    Vous pouvez, bien sûr, être plus générique et utilisez simplement:

    ul { /* targets all ul elements */
    /* general styles */
}
ul li { /* targets all li elements within a ul */
    /* general styles */
}
ul li ul { /* targets all ul elements within an li element, itself within a ul */
    /* overrule general 'outer' styles */
}
ul li ul li { /* targets all li elements within a ul element,
                 within an li element, itself within a ul...and so on */
    /* overrule general 'outer' styles */
}

    À l'aide de l'approche générale:

    <ul>
    <li>This should be green!</li>
    <li>This is also green...
        <ul>
            <li>But this is not, it's, um...blue!</li>
            <li>And so on...</li>
        </ul></li>
    <li>This is green too, just because.</li>
</ul>

    Le code CSS suivant doit démontrer son utilisation:

    ul li {
    color: green; /* the 'general'/'default' settings */
    margin-left: 10%;
}

ul li ul li {
    color: blue; /* this overrides the 'general' color setting */
                 /* the margin is not overridden however */
}​

    JS Fiddle démo.

    Références:

    InformationsquelleAutor David Thomas
  2. 4

    Avez-vous essayé CSS enfant-sélecteurs?

    ul { /* parent list styles here */ }
ul > li > ul { /* child list styles here */ }
    InformationsquelleAutor Kevin Boucher
  3. 0

    Utiliser le
    ul li ul li {...} Ou

    ul li ul {....} pour donner un style différent à la liste des enfants. si vous êtes à la recherche pour le menu de navigation avec le menu enfant.

    Ici est vraiment bon exemple de même.

    Il utilise CSS3.

    InformationsquelleAutor Rahul R.