forzayalta | Bonjour,
je travaille actuellement a la réalisation de menus en CSS.
J'aimerai bien avoir un menu du type suivant:
http://www.kloeber.com/kloeber/fra/index.php
Je suis donc parti d'un ancien menu que j'avais réalisé et qui donne pour le moment ce résultat:
http://www.cmax.fr/sandbox/essai4/index.html
Ce qui me dérange, c'est que lorsque l'on survole un element du menu pour affiche son menu, un écart se crée entre le menu survolé et le menu juste en dessous. J'aimerai bien que cet écart disparaisse, si vous pouviez m'aider.
Voici mon CSS:
Code :
- dt, dl, dd, ul, li
- {
- list-style-type: none;
- margin: 0 10px 0 0;
- padding: 0;
- }
- dt
- {
- border: 1px solid gray;
- color: #C0C0C0;
- width: 100px;
- }
- #menu
- {
- position : absolute;
- left: 50px;
- top: 20px;
- }
- #menu li
- {
- display: inline;
- }
- #menu a
- {
- text-decoration: none;
- color: #000;
- background: #fff;
- margin: 0;
- padding: 0;
- }
- #smenu1, #smenu2, #smenu3, #smenu4
- {
- position: relative;
- left: 100px;
- bottom: 19px;
- height: 15px;
- font-size: 0.7em;
- border-top: 1px solid gray;*
- width: 400px;
- }
|
et une partie du HTML:
Code :
- <div id="menu">
- <dl>
- <dt onmouseover="montre('smenu1');"><a href="#">Menu de la categorie 1</a></dt>
- <dd id="smenu1">
- <ul>
- <li><a href="#">Sous-menu 1.1</a></li>
- <li><a href="#">Sous-menu 1.2</a></li>
- <li><a href="#">Sous-menu 1.3</a></li>
- </ul>
- </dd>
- </dl>
- <dl>
- <dt onmouseover="montre('smenu4');"><a href="#">Menu de la categorie 4</a></dt>
- <dd id="smenu4">
- <ul>
- <li><a href="#">Sous-menu 4.1</a></li>
- <li><a href="#">Sous-menu 4.2</a></li>
- <li><a href="#">Sous-menu 4.3</a></li>
- </ul>
- </dd>
- </dl>
- </div>
|
Merci |
