28200 sujets

CSS et mise en forme, CSS3

[résolu] Ul dans li -> le sous-menu n'apparait pas

Bonjour,

depuis que j'ai changé mon html
<li class="menu_active"><a href="?">Donec quis arcu</a></li>
				<ul class="menu_sub">
					<li><a href="?">Vestibulum feugiat</a></li>
					<li><a href="?">turpis</a></li>
				</ul>
			<li class="menu_4"><a href="?">hendrerit</a></li>
			<li class="menu_5"><a href="?">euismod!</a></li>
			<li class="menubr"></li>

en
<li class="menu_active"><a href="?">Donec quis arcu</a>
				<ul class="menu_sub">
					<li><a href="?">Vestibulum feugiat</a></li>
					<li><a href="?">turpis</a></li>
				</ul>
			</li>
			<li class="menu_4"><a href="?">hendrerit</a></li>
			<li class="menu_5"><a href="?">euismod!</a></li>
			<li class="menubr"></li>

pour que mon code soit validé, le sous-menu n'apparait plus sur ma page.

le css:
#leftmenu
{
	background-color: #6687E8;
	border-left: 1pt solid #006600;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	vertical-align: top;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 115px; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 115px;
		}
html>body leftmenu {
	width: 115px; 
}
#leftmenu ul {margin:0; padding:0;}
#leftmenu li {font-size: 7pt;list-style-type:none; margin:0; padding:0;width: 100%;height: 18px; text-align: center;border-bottom: 1px solid #6687E8;vertical-align: middle; float: right;}
#leftmenu li a { color:#000000; text-decoration: none; font-size: inherit;}
#leftmenu li a:hover { color:#006699; text-decoration: none; font-size: inherit;}
#leftmenu li.menu_1, li.menu_2, li.menu_3, li.menu_4, li.menu_5, li.menu_6, li.menu_7, li.menu_8, li.menu_9, li.menu_10, li.menu_11, li.menu_12{  background-color:#FF9900; }
#leftmenu li.menu_active {  background-color:#FFCC00; }
#leftmenu li.menu_active ul.menu_sub li {  background-color:#FFFF99; font-size: 7pt;list-style-type:none; margin:0; padding:0;width: 100%;height: 18px; text-align: center;border-bottom: 1px solid #6687E8;vertical-align: middle; float: right;}

.menubr
{
  background-color:#6687E8;
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 15px;
  float: right;
  border: none;
}


la page se trouve ici: http://www.christianmusicians.be/annesophie.php/home/home
et le css défectueux Smiley cligne est le css "default"

j'ai encore une autre question:
comment remplacer les <li class="menubr"> ? Ca fait bizarre quand on voit la liste sans le css...

merci d'avance,
hannah
Modifié par hannah (29 Apr 2005 - 11:16)
j'ai plus ou moins compris pourquoi mes sous-menus n'apparaissaient plus, mais tout n'est pas encore comme je voudrais.

Ce qui cachait mes sous-menus était un 
height: 18px;
qui définissait tous les li. Le problème est que je ne peux pas savoir d\'avance combien de sous-menus il y aura dans la page finale, et que je ne peux donc pas définir un height fixe. Pour l'instant les sous-menus s\'affichent, mais le border-bottom de menu-active a disparu
<li class=\"menu_active\"><a href=\"?\">Donec quis arcu</a>
<ul class=\"menu_sub\">
<li><a href=\"?\">Vestibulum feugiat</a></li>
<li><a href=\"?\">turpis</a></li>
</ul>
</li>
<li class=\"menu_4\"><a href=\"?\">hendrerit</a></li>
<li class=\"menu_5\"><a href=\"?\">euismod!</a></li>
<li class=\"menubr\"></li>

le css:
#leftmenu
{
	background-color: #6687E8;
	border-left: 1pt solid #006600;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	vertical-align: top;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 115px; /* ie5win fudge begins */
	voice-family: \"\\\"}\\\"\";
	voice-family:inherit;
	width: 115px;
		}
html>body leftmenu {
	width: 115px; /* ie5win fudge ends */
}
#leftmenu ul {margin:0; padding:0;}
#leftmenu li {font-size: 7pt;list-style-type:none; margin:0; padding:0;width: 100%; text-align: center;border-bottom: 1px solid #6687E8;vertical-align: middle; float: right;}
#leftmenu li a { color:#000000; text-decoration: none; font-size: inherit;}
#leftmenu li a:hover { color:#006699; text-decoration: none; font-size: inherit;}
#leftmenu li.menu_1, li.menu_2, li.menu_3, li.menu_4, li.menu_5, li.menu_6, li.menu_7, li.menu_8, li.menu_9, li.menu_10, li.menu_11, li.menu_12{  background-color:#FF9900; height: 18px;}
#leftmenu li.menu_active {  background-color:#FFCC00; }
#leftmenu li.menu_active ul.menu_sub li {  background-color:#FFFF99; height: 18px; }

.menubr
{
  background-color:#6687E8;
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 15px;
  float: right;
  border: none;
}


je répète également mon autre question:
a écrit :
comment remplacer les <li class=\"menubr\"> ? Ca fait bizarre quand on voit la liste sans le css...
je ne sais pas ce qui s'est passé, mais il y a des \ qui se sont rajoutés un peu partout. J'en avais vu qq uns avant de poster mais il y en a beaucoup plus. Est-ce un bug de la prévisualisation???? Smiley eek
je re-poste le code

#leftmenu
{
	background-color: #6687E8;
	border-left: 1pt solid #006600;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	vertical-align: top;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 115px; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 115px;
		}
html>body leftmenu {
	width: 115px; /* ie5win fudge ends */
}
#leftmenu ul {margin:0; padding:0;}
#leftmenu li {font-size: 7pt;list-style-type:none; margin:0; padding:0;width: 100%; text-align: center;border-bottom: 1px solid #6687E8;vertical-align: middle; float: right;}
#leftmenu li a { color:#000000; text-decoration: none; font-size: inherit;}
#leftmenu li a:hover { color:#006699; text-decoration: none; font-size: inherit;}
#leftmenu li.menu_1, li.menu_2, li.menu_3, li.menu_4, li.menu_5, li.menu_6, li.menu_7, li.menu_8, li.menu_9, li.menu_10, li.menu_11, li.menu_12{  background-color:#FF9900; height: 18px;}
#leftmenu li.menu_active {  background-color:#FFCC00; }
#leftmenu li.menu_active ul.menu_sub li {  background-color:#FFFF99; height: 18px; }

.menubr
{
  background-color:#6687E8;
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 15px;
  float: right;
  border: none;
}

et
<li class="menu_active"><a href="?">Donec quis arcu</a>
<ul class="menu_sub">
<li><a href="?">Vestibulum feugiat</a></li>
<li><a href="?">turpis</a></li>
</ul>
</li>
<li class="menu_4"><a href="?">hendrerit</a></li>
<li class="menu_5"><a href="?">euismod!</a></li>
<li class="menubr"></li>
bon en lisant d'autres posts j'ai trouvé une solution en utilisant des dl et dd et cela foctionne Smiley smile

mon autre question reste :
comment remplacer les <dd class="menubr"> ? Ca fait bizarre quand on voit la liste sans le css...
depuis que ce sont des dd, il n'affiche plus rien quand c'est un dd vide. Je ne comprends pas quelle est la différence entre les dd et li mais c'est bien pratique.

Mes problèmes sont donc temporairement résolus.
Merci pour votre aide Smiley lol
Sujet clos
Aller à