28172 sujets

CSS et mise en forme, CSS3

Ajouter des sous menu sur un menu horizontal

Bonjour
Je viens de mettre en place ce menu horizontale. Le problème c'est que je souhaiterais mettre en place des sous menus comme celui-ci J'ai essayé pleins de techniques mais je n'y arrive pas!! à chaque fois cela me décale tout au moins figer toute bizarre. D'après vous est-ce possible?

je vous remercie d'avance de vos réponses
Salut,

Pour qu'il y ait une solution à ton problème, encore faut-il qu'il y ait un problème clairement exposé, ce qui n'est pas le cas de ton sujet. Il serait en effet bon que tu mettes toutes les chances de ton côté pour que nous comprenions ton problème, et que nous puissions t'y apporter une ou plusieurs solutions.

Dans l'ordre de priorité, tu peux nous fournir :
1. un descriptif très précis de ton problème, impératif pour focaliser notre recherche dans le bons sens.
2. un lien vers une page en ligne, qui permet de constater ce problème par nous même, ne nécessitant parfois pas d'autres informations.
3. l'intégralité du code html et css produit dans le navigateur (et pas seulement des extraits, car le problème se situe parfois ailleurs dans le code).
4. des schémas ou captures d'écran.

La rapidité d'obtention de la réponse dépendra de la qualité les informations que tu nous fourniras.

Bonne chance à toi. Smiley cligne
ok désolé.Voici mon problème en détails

Voici le code que j'ai mis en place
<html>

<head>
<style type="text/css">
  

.glossymenu{
	position: relative;
	padding: 0 0 0 34px;
	margin: 0 auto 0 auto;
	background: url(img/menub_bg.gif) repeat-x; /*tab background image path*/
	height: 46px;
	list-style: none;
}

.glossymenu li{
	float:left;
}

.glossymenu li a{
	float: left;
	display: block;
	color:#000;
	text-decoration: none;
	font-family: sans-serif;
	font-size: 13px;
	font-weight: bold;
	padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
	height: 46px;
	line-height: 46px;
	text-align: center;
	cursor: pointer;	
}

.glossymenu li a b{
	float: left;
	display: block;
	padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
	color: #fff;
	background: url(img/menub_hover_left.gif) no-repeat; /*left tab image path*/
	background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
	color: #fff;
	background: url(img/menub_hover_right.gif) no-repeat right top; /*right tab image path*/
}

</style>

</head>

<body>
<ul class="glossymenu">
	<li class="current"><a href="http://"><b>Home</b></a></li>
	<li><a href="http://"><b>Articles </b></a></li>
	<li><a href="http://"><b>Forums</b></a></li>	
	<li><a href="http://"><b>Téléchargements</b></a></li>	
	<li><a href="http://"><b>Documentations</b></a></li>	
	<li><a href="http://"><b>Contact</b></a></li>	
</ul>

</body>

</html>
ce qui donne ca

Ce que je voudrais, c'est que par exemple lorsque l'on clique sur "forum", un sou menu s'affiche avec différents liens cliquables( voir image ci-dessous)



[EDIT Laurie-Anne : Image trop grande] http://img59.imageshack.us/img59/5558/img3k.png
Modifié par Laurie-Anne (25 Aug 2010 - 10:36)
Bonjour,

Premièrement, même pour des tests, le doctype est obligatoire !

Ensuite, c'est le code de ton essai d'implémentation de sous menu dont nous avons besoin pour t'aider...
Voici donc le code 
<html>

<head>
<style type="text/css">
  

.glossymenu{
	position: relative;
	padding: 0 0 0 34px;
	margin: 0 auto 0 auto;
	background: url(img/menub_bg.gif) repeat-x; /*tab background image path*/
	height: 46px;
	list-style: none;
}

.glossymenu li{
	float:left;
}

.glossymenu li a{
	float: left;
	display: block;
	color:#000;
	text-decoration: none;
	font-family: sans-serif;
	font-size: 13px;
	font-weight: bold;
	padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
	height: 46px;
	line-height: 46px;
	text-align: center;
	cursor: pointer;	
}

.glossymenu li a b{
	float: left;
	display: block;
	padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
	color: #fff;
	background: url(img/menub_hover_left.gif) no-repeat; /*left tab image path*/
	background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
	color: #fff;
	background: url(img/menub_hover_right.gif) no-repeat right top; /*right tab image path*/
}

#tabcontent{ /*2nd level content wrapper*/
border: 1px solid #778;
background-color: #EFFADC;
height: 20px /*IE7 beta2 fix*/
}

#tabcontent ul{
padding: 0;
margin: 0;
list-style-type: none;
display: none;
}

#tabcontent ul li{
display: inline;
}

#tabcontent ul.selected{ /*selected 2nd level content*/
display: block;
}

#tabcontent ul li a{
border-right: 1px solid #778;
color: navy;
padding: 2px 5px;
display: block;
float: left;
text-decoration: none;
}


#tabcontent ul li a:hover{
background-color: #D3F1A0;
color: blue;
}

.clearfix:after{ /*Clear floats hack:  http://positioniseverything.net/easyclearing.html*/
 
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.clearfix{
display: inline-table;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


</style>

</head>

<body>
<ul class="glossymenu">
	<li class="current"><a href="http://"><b>Home</b></a></li>
	<li><a href="http://"><b>Articles </b></a></li>
	<li><a href="http://"><b>Forums</b></a></li>	
	<li><a href="http://"><b>Téléchargements</b></a></li>	
	<li><a href="http://"><b>Documentations</b></a></li>	
	<li><a href="http://"><b>Contact</b></a></li>	
</ul>
<div id="tabcontent" class="clearfix">

<!--Sub Content #1 -->
<ul>
<li><a href="http://">Home</a></li>
<li><a href="http://">New</a></li>
<li><a href="http://">Revised</a></li>
</ul>

<!--Sub Content #2 -->
<ul class="selected">
<li><a href="http://">Horizontal CSS Menus</a></li>
<li><a href="http://">Vertical CSS Menus</a></li>
<li><a href="http://">Image Effects</a></li>
<li><a href="http://">Form Effects</a></li>
</ul>

</div>

</body>

</html>


qui donne au final ca,le problème c'est même si je mets mon curseur sur l'onglet "forum" cela ne me change pas les sous menus que j'ai définis dans mon code
stephane72 a écrit :
problème c'est même si je mets mon curseur sur l'onglet "forum" cela ne me change pas les sous menus que j'ai définis dans mon code
Logique, il n'y a rien qui le "demande". Il manque un bout de JavaScript pour changer l'affichage des sous menu lors du survol.
Sujet clos
Aller à