Menu deroulant vers le haut ??

Menu deroulant vers le haut ?? - HTML/CSS - Programmation

Marsh Posté le 20-06-2009 à 18:42:29    

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]

Reply

Marsh Posté le 20-06-2009 à 18:42:29   

Reply

Marsh Posté le 22-06-2009 à 09:59:39    

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
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed