Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2019 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Menu deroulant vers le haut ??

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Menu deroulant vers le haut ??

n°1897272
Lekouti
Posté le 20-06-2009 à 18:42:29  profilanswer
 

Bonjour a tous,
 
J'aimerai intégrer ce menu déroulant dan mon site.  
http://www.stylapar.net/menud/index
 
Mais je ne sais pas comment le modifier pour que le menu ce deroule vers le haut ?!
Avez vous une idée ?
 
Html:
 

Code :
  1. <div class="menu">
  2.  <ul>
  3.   <li><a href="#" >Home</a></li>
  4.   <li><a href="#" id="current">Products</a>
  5.    <ul>
  6.     <li><a href="#">Drop Down CSS Menus</a></li>
  7.     <li><a href="#">Horizontal CSS Menus</a></li>
  8.     <li><a href="#">Vertical CSS Menus</a></li>
  9.     <li><a href="#">Dreamweaver Menus</a></li>
  10.      </ul>
  11.    </li>
  12.   <li><a href="/faq.php">FAQ</a>
  13.                 <ul>
  14.                 <li><a href="#">Drop Down CSS Menus</a></li>
  15.                 <li><a href="#">Horizontal CSS Menus</a></li>
  16.                 <li><a href="#">Vertical CSS Menus</a></li>
  17.                 <li><a href="#">Dreamweaver Menus</a></li>
  18.                 </ul>
  19.           </li>
  20.   <li><a href="/contact/contact.php">Contact</a></li>
  21.  </ul>
  22. </div>


 
CSS:
 

Code :
  1. .menu{
  2. border:none;
  3. border:0px;
  4. margin:0px;
  5. padding:0px;
  6. font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
  7. font-size:14px;
  8. font-weight:bold;
  9. }
  10. .menu ul{
  11. background:#333333;
  12. height:35px;
  13. list-style:none;
  14. margin:0;
  15. padding:0;
  16. }
  17. .menu li{
  18.  float:left;
  19.  padding:0px;
  20.  }
  21. .menu li a{
  22.  background:#333333 url("images/seperator.gif" ) bottom right no-repeat;
  23.  color:#cccccc;
  24.  display:block;
  25.  font-weight:normal;
  26.  line-height:35px;
  27.  margin:0px;
  28.  padding:0px 25px;
  29.  text-align:center;
  30.  text-decoration:none;
  31.  }
  32.  .menu li a:hover, .menu ul li:hover a{
  33.   background: #2580a2 url("images/hover.gif" ) bottom center no-repeat;
  34.   color:#FFFFFF;
  35.   text-decoration:none;
  36.   }
  37. .menu li ul{
  38.  background:#333333;
  39.  display:none;
  40.  height:auto;
  41.  padding:0px;
  42.  margin:0px;
  43.  border:0px;
  44.  position:absolute;
  45.  width:225px;
  46.  z-index:200;
  47.  /*top:1em;
  48.  /*left:0;*/
  49.  }
  50. .menu li:hover ul{
  51.  display:block;
  52.  
  53.  }
  54. .menu li li {
  55.  background:url('images/sub_sep.gif') bottom left no-repeat;
  56.  display:block;
  57.  float:none;
  58.  margin:0px;
  59.  padding:0px;
  60.  width:225px;
  61.  }
  62. .menu li:hover li a{
  63.  background:none;
  64.  
  65.  }
  66. .menu li ul a{
  67.  display:block;
  68.  height:35px;
  69.  font-size:12px;
  70.  font-style:normal;
  71.  margin:0px;
  72.  padding:0px 10px 0px 15px;
  73.  text-align:left;
  74.  }
  75.  .menu li ul a:hover, .menu li ul li:hover a{
  76.   background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
  77.   border:0px;
  78.   color:#ffffff;
  79.   text-decoration:none;
  80.   }
  81. .menu p{
  82.  clear:left;
  83.  }


 
Merci a tous  [biggrin]

mood
Publicité
Posté le 20-06-2009 à 18:42:29  profilanswer
 

n°1897516
pataluc
Posté le 22-06-2009 à 09:59:39  profilanswer
 

salut,
 
il n'y a que 3 diff entre ton code et celui de l'exemple qui fonctionne:
 
le "margin:0px;" dans .menu,
 
le "position:relative;" dans .menu ul que tu as enlevé,  
 
et le "top:-140px;" dans .menu li ul que tu as enlevé également...
 
regarde donc de ce coté... a priori c surtout le top:-140 qui manque. par contre c super crade parce que si ton sous menu n'a plus le même nombre d'item, le décalage n'est plus bon.


Message édité par pataluc le 22-06-2009 à 10:00:15

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Menu deroulant vers le haut ??

 

Sujets relatifs
XML + XSL vers tableau HTMLExport Excel vers Access à l'aide de VBA
Menu non gérable par commentaires conditionnelsProbleme menu déroulant
CSS - Barre de menu-liens ne fonctinnent pasHelp - Menu CSS sous Joomla
Redirection d'un domaine vers un sous dossier d'un autre domaineBesoin d'un coup de pouce en css (menu horizontal)
Transmission de valeur depuis formulaire vers BDD 
Plus de sujets relatifs à : Menu deroulant vers le haut ??

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.062 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR