28172 sujets

CSS et mise en forme, CSS3

[Rséolu] Deux UL horizontalement dans une DIV sans size

Bonjour,

Je galère depuis un moment sur la mise en oeuvre d'un menu dynamique.Lors de la selection d'un item d'un premier UL, j'ouvre une DIV contenant dans mon exemple 2 UL et je voudrais que ces 2 UL se positionnent horizontalement. Mais malgré mes efforts, ils se positionnent verticalement.

Je ne souhaite pas prédéfinir de largeur à ma DIV.
Est-ce possible ?

Voici mon code

<div id="nav">
  <ul>
    <li>
      <a href="#">MENU</a>
      <div class="dropdown">
        <ul>
          <li><a href="#">AAA</a></li>
          <li><a href="#">BBB</a></li>
        </ul>
        <ul>
          <li><a href="#">CCC</a></li>
          <li><a href="#">DDD</a></li>
        </ul>
      </div>
    </li>
  </ul>
</div>


#nav ul, ol, li {margin: 0; padding: 0; border: 0;overflow: visible;}
#nav {clear:both;margin:4px 0 0 0;background:#fff;}
#nav ul{display:table;float:none;margin:0 0 0 0;padding:0;background-color:#fff;}
#nav li{display:table-cell;float:none;position:relative;border-top:3px solid #1B8815;text-transform: uppercase;font-size:15px;font-weight:bold;text-align:center;}
#nav li a{display:inline-block;font-weight:bold;text-transform:uppercase;text-decoration:none; color: #000b15;}
#nav li:last-child{border-right:1px solid #d2d6db;}
     
#nav li .dropdown{padding:10px;margin:1px 0 0 0;display:block;position:absolute;border:1px solid #d2d6db;box-shadow:0 3px 3px rgba(0,0,0,0.1);background-color:#fefefe;border-style:solid;border-width:0 0 3px 0;z-index:999;}
#nav li .dropdown ul{display:block;float:left;width:auto;}
#nav li .dropdown li{display:block;border:0;text-align:left;}
#nav li .dropdown li:last-child{border:0;}
#nav li .dropdown li a{border:0;font-size:15px;}
#nav li:hover .dropdown{display:block;color:#333;}

Modifié par criocere (04 Dec 2013 - 13:52)
Salut,

Supprime le "position: absolute;" de ta div.dropdown et pour qu'elle englobe les "ul" qui flottent, tu peux ajouter un "overflow: hidden" (par exemple, ou mettre tes "ul" en inline-block plutôt qu'en flottant).

tm
tm™ a écrit :
Salut,

Supprime le &quot;position: absolute;&quot; de ta div.dropdown et pour qu'elle englobe les &quot;ul&quot; qui flottent, tu peux ajouter un &quot;overflow: hidden&quot; (par exemple, ou mettre tes &quot;ul&quot; en inline-block plutôt qu'en flottant).

tm


Merci TM
Je ne peux pas supprimer position:absolute car je ne veux pas que mon item soit "englobant" à mon sous-menu. Les items de premier niveau (barre de menu horizontale du site) sont indépendants en taille des sous-menus.
Yes, trouvé !!

Il suffit d'enlever le position:relative sur le node père de dropdown et supprimer top:32px sur dropdown
Sujet clos
Aller à