Ne peut pas faire de CSS menu déroulant afficher en dessous de son parent?

J'ai un menu comme ceci

<nav id="nav">
 <ul>
  <li>Home</li>
  <li>Menu1
   <ul>
    <li>Sub1</li>
    <li>Sub2</li>
   </ul>
  </li>
  <li>Menu2
   <ul>
    <li>Sub1</li>
    <li>Sub2</li>
   </ul>
  </li>
 </ul>
</nav>

Mon fichier CSS, c'est comme cela

#nav ul li {
    display: inline;
}
#nav ul ul {
    display: none;  
}
#nav ul li:hover > ul {
    display: block;
    position: absolute;
}
#nav ul ul li {
    display: block; 
}

Les sous-éléments de menu déroulant et regardez bien, c'est juste qu'ils sont à tomber vers le bas dans le cadre du premier élément de la liste, à la Maison.

Comment puis-je obtenir de descendre sous le parent de l'élément de liste ils sont sous?

InformationsquelleAutor | 2013-05-06

5

Ici est un violon avec une solution de travail: http://jsbin.com/akazev/2/edit

Ont un coup d'oeil à la nouvelle CSS:
```
nav ul li {
    display:  block;
    float: left;
}
nav ul ul {
    display: none;  
}
nav ul li:hover > ul {
    display: block;
    position: absolute;
    margin-left: -30px;
}
nav ul ul li {
    display: block; 
    float: none;
}
```
Au lieu d'afficher votre premier niveau des liens en ligne, de les afficher comme inline-block ou float. C'était ce qui était buggé la valeur liquidative. Si vous utilisez float (comme moi), n'oubliez pas de définir le niveau plus profond des liens vers float: none. Vous devrez également mettre une marge à gauche pour le positionnement absolu ul.

PS: N'est-ce pas <nav id="nav"> un peu inutile?
- Génial! Je vous remercie. Et oui, id="nav" est assez inutile, mais j'ai l'intention d'avoir plusieurs <nav> éléments, donc, je voulais juste un moyen de se différencier entre eux.
- Vous êtes les bienvenus. Dans ce cas, ne serait-il pas mieux de les nommer quelque chose comme nav-avant, nav-part, etc.
InformationsquelleAutor Tyblitz

Essayer cette

<html>
<head>
<style type="text/css">
#nav ul li {
    float:left;
}
#nav ul ul {
    display: none;  
}
#nav ul li:hover ul {
    display: block;
    position:absolute;
}
#nav ul ul li {
    display: block;
    border:1px #ccc solid;
    padding:2px;
    float:none;
}
</style> 
</head>
<body>
<dev id="nav">
 <ul>
  <li>Home</li>
  <li>Menu1
   <ul>
    <li>Sub1</li>
    <li>Sub2</li>
   </ul>
  </li>
  <li>Menu2
   <ul>
    <li>Sub1</li>
    <li>Sub2</li>
   </ul>
  </li>
 </ul>
</dev>
</body>
</html>

InformationsquelleAutor Nayana Adassuriya

0

Ici, vous êtes contrainte de simplement mettre à jour votre code de
```
#nav ul li {
    display: inline;
}
#nav li ul {
    display: none;  
}
#nav ul li:hover ul {
    display: block;
    position: absolute;
}
#nav ul ul li {
    display: block; 
}
```
http://jsfiddle.net/dPgQN/ <--- ceci est un aperçu en direct
- Votre violon ne fonctionne pas, le sous-menu est toujours le chevauchement eachother, c'est à dire le menu 2 sous-menu apparaît sous menu 1
- jsfiddle.net/dPgQN/1 vous pouvez essayer celui-ci , fonctionne parfaitement
InformationsquelleAutor Jason VanHil

Essayer cette..

Code HTML:

<div id="navMenu">
        <ul>
            <li>Home</li>

            <li>Menu1
                <ul>
                    <li>Sub1</li>
                    <li>Sub2</li>
                </ul>
            </li>
            <li>Menu2
                <ul>
                    <li>Sub1</li>
                    <li>Sub2</li>
                </ul>
            </li>
        </ul>
    </div>

CSS:

#navMenu{
    margin:0;
    padding:0;
}
#navMenu ul{
    margin:0;
    padding:0;
    line-height:30px;
}
#navMenu li{
    margin:0;
    padding:5px;
    list-style:none;
    float:left;
    position:relative;
}
#navMenu ul ul{
    position:absolute;
    visibility:hidden;
} 
#navMenu ul li:hover ul{
    right: auto;
    left: 0;
    visibility:visible
}

J'espère que cela est utile pour vous.,

InformationsquelleAutor Sathish

Vous devez vous connecter pour publier un commentaire.