4
C'est probablement (espérons-le) une question assez simple, mais je n'arrive pas à le faire fonctionner alors je vais me tourner vers les experts ici. J'utilise un menu déroulant CSS assez simple, avec juste un peu de JQuery impliqué. Le problème est que lorsque je survole le menu déroulant et qu'il s'ouvre, il pousse tout sur la page en dessous plutôt que de l'ouvrir. J'ai essayé de jouer avec l'index z mais cela ne semble pas être le problème. Tous les conseils seraient fantastiques, merci d'avance.menus déroulants CSS poussant le contenu de la page vers le bas
Voici le code HTML; désolé, ce n'est pas super-joli, j'ai dû arracher un tas de choses pour le rendre simple et générique.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML style="zoom: 100%; ">
<HEAD>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
</HEAD>
<BODY class="bodyclass" style="background:#BCE2F1; height: 100%;">
<DIV id="maincontainer" style="min-height: 100%;">
<STYLE type="text/css">
#cssdropdown, #cssdropdown ul { font-size: 9pt; background-color: black; list-style: none; }
#cssdropdown, #cssdropdown * { padding: 0; margin: 0; }
#cssdropdown li.headlink { width: 140px; float: left; margin-left: -1px; border: 1px black solid;
background-color: white; text-align: center; }
#cssdropdown li.headlink a { display: block; color: #339804; padding: 3px; text-decoration: none; }
#cssdropdown li.headlink a:hover { background-color: #F8E0AC; font-weight: bold; }
#cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: left; }
#cssdropdown li.headlink:hover ul { display: block; text-decoration: none; }
#cssdropdown li.headlink ul li a { padding: 5px; height: 15px; }
#cssdropdown li.headlink ul li a:hover { background-color: #CCE9F5; text-decoration: none; font-weight: normal; }
/* #cssdropdown a { color: #CCE9F5; } */
#cssdropdown ul li a:hover { text-decoration: none; }
#cssdropdown li.headlink { background-color: white; }
#cssdropdown li.headlink ul { background-color: white; background-position: bottom; padding-bottom: 2px; }
</STYLE>
<SCRIPT language="JavaScript">
$(document).ready(function(){
$('#cssdropdown li.headlink').hover(
function() { $('ul', this).css('display', 'block'); },
function() { $('ul', this).css('display', 'none'); });
});
</SCRIPT>
<DIV class="navigation_box" style="border: none;">
<DIV class="innercontent">
<DIV style="background: white; float: left; padding: 5px; border: solid 1px black;">
LOGO
</DIV>
<DIV class="navmenu" style="float: right; bottom: 0; font-size: 9pt; text-align: right;">
<SPAN>Logged in as [email protected]</SPAN><BR>
<UL id="cssdropdown">
<LI class="headlink">
<A href="http://localhost:3000/one">One</A>
<UL style="display: none; ">
<LI><A href="http://localhost:3000/one">Option One</A></LI>
<LI><A href="http://localhost:3000/one">Option Two</A></LI>
<LI><A href="http://localhost:3000/one">Option Three</A></LI>
<LI><A href="http://localhost:3000/one">Option Four</A></LI>
</UL>
</LI>
<LI class="headlink">
<A href="http://localhost:3000/two">Two</A>
<UL style="display: none; ">
<LI><A href="http://localhost:3000/two">Option Two-One</A></LI>
<LI><A href="http://localhost:3000/two">Option Two-Two</A></LI>
<LI><A href="http://localhost:3000/two">Option Two-Three</A></LI>
</UL>
</LI>
<LI class="headlink" style="width: 80px;">
<A href="http://localhost:3000/three">Three</A>
</LI>
<LI class="headlink" style="width: 300px; padding-top: 2px; height: 19px;">
<FORM action="http://localhost:3000/search" method="post">
<P>
Search:
<INPUT id="searchwords" name="searchwords" size="20" type="text" value="">
<INPUT name="commit" type="submit" value="Find">
</P>
</FORM>
</LI>
<LI class="headlink" style="width: 60px;">
<A href="http://localhost:3000/four">Four</A>
</LI>
<LI class="headlink" style="width: 60px;">
<A href="http://localhost:3000/logout">Logout</A>
</LI>
</UL>
</DIV>
</DIV>
</DIV>
<DIV id="contentwrapper" style="clear:both">
<DIV class="innercontent" style="margin: 0px 20px 20px 20px;">
<H1>Some test content here to fill things out a little bit.</H1>
</DIV>
</DIV>
</DIV>
<DIV id="footer" style="clear: both; float: bottom;">
<DIV class="innercontent" style="font-size: 10px;">
Copyright 2008-2010
</DIV>
</DIV>
</BODY>
Vous ne savez pas comment vous recevez les mises à jour (puisque j'ai seulement posté un commentaire sur ma réponse) donc j'espère que vous serez alertés via ce commentaire. J'ai édité ma réponse et vous ai donné une version CSS + HTML rapide et simple d'un menu déroulant. Salutations :) – darcy