5568 sujets

Sémantique web et HTML

Rendre un menu déroulant

Bonjour,

J'ai fais un petit menu que j'aimerais rendre déroulant sur deux niveaux, voici le code du menu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
<title></title>


  <style type="text/css">
body {
background-color : #99ccff; 
font-variant: normal;
font-size: 12px;
font-family: Verdana, Arial, Helvetica 
}
  
#menu {
PADDING-RIGHT: 0px; 
PADDING-LEFT: 0px; 
PADDING-BOTTOM: 0px; 
MARGIN: 0px; 
WIDTH: 150px; 
PADDING-TOP: 0px; 
TEXT-ALIGN: center;
}

.element_menu {
BORDER-RIGHT: #2c485c 1px solid; 
BORDER-TOP: none; 
MARGIN: 0px; 
BORDER-LEFT: #2c485c 1px solid; 
BORDER-BOTTOM: #2c485c 1px solid;
}

#menu H5 {
BORDER-RIGHT: #2c485c 1px dashed; 
BORDER-TOP: #2c485c 1px dashed; 
PADDING-LEFT: 0px; 
PADDING-BOTTOM: 0px; 
MARGIN: 0px; 
BORDER-LEFT: #2c485c 1px dashed; 
COLOR: #2c485c; 
PADDING-TOP: 3px; 
BORDER-BOTTOM: #2c485c 1px dashed; 
HEIGHT: 22px;
font-size: 18px;
}

#menu UL {
PADDING-RIGHT: 0px; 
PADDING-LEFT: 0px; 
PADDING-BOTTOM: 0px; 
MARGIN: 0px; 
PADDING-TOP: 0px; 
LIST-STYLE-TYPE: none;
}

#menu A {
padding-top: 3px;
color: black;
DISPLAY: block; 
HEIGHT: 20px; 
TEXT-DECORATION: none;
}

#menu A:hover {
BACKGROUND: #66ccff;
}

#corps {
BORDER-RIGHT: black 1px dashed; 
PADDING-RIGHT: 5px; 
BORDER-TOP: black 1px dashed; 
PADDING-LEFT: 5px; 
PADDING-BOTTOM: 5px; 
MARGIN: 0px 160px; 
BORDER-LEFT: #2c485c 1px dashed; 
WIDTH: auto; 
PADDING-TOP: 5px; 
BORDER-BOTTOM: black 1px dashed;
}
  </style>
</head>

<body>

<div id="menu">
<h5>test</h5>

<div class="element_menu">
<ul>

  <li><a href="http://dopo-irc.com/" onmouseover="javascript:montre(smenu1);">Menu 1</a> </li>
  <li><a href="http://dopo-irc.com/">Menu 2</a> </li>
  <li><a href="http://dopo-irc.com/">Menu 3</a> </li>
  <li><a href="http://dopo-irc.com/">Menu 4</a> </li>

</ul>

</div>
</div>

</body>

</html>


J'ai été voir sur alsacreation mais leur menu n'est pas déroulant comme je veux (je veux comme sur www.epiknet.org) comment faire ???

Merci d'avance pour vos réponses !!!
Modifié par ludodoludujodu (20 May 2006 - 10:19)
Je vois que tu as commencé en javascript si ça block c'est la source du conflit.

néanmoins en CSS tu peux afficher ou non des claques flotant.
Si ton menu est fixe il te suffit de définir tes sous menu en flotant et de les faire apparaitre par un onMousseover et disparaitre par un onMousseout.

A noté qu'au final tu aura aussi du javascript en faite Smiley sweatdrop
Modifié par Gectou4 (22 May 2006 - 14:07)
Sujet clos
Aller à