28172 sujets

CSS et mise en forme, CSS3

Adapter sous-menu d'un menu horizontal

Bonjour,

J'ai suivi un tutoriel pour créer un menu horizontal avec CSS3 et cela fonctionne bien mais je souhaiterais que la longueur des sous-menus s'adapte à la longueur du titre des sous-menus.

Est-ce possible ?

Voici le html : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="DropDown.css" />
<title>Untitled Document</title>
</head>

<body>

<div id="wrapper">
<div id="navMenu">

<ul>
<li><a href="#">ProductsProductsProductsProductsProducts</a>

<ul>

<li><a href="#">Test trop long long long long</a></li>
<li><a href="#">Link item</a></li>
<li><a href="#">Link item</a></li>
<li><a href="#">Link item</a></li>
<li><a href="#">Link item</a></li>

</ul> <!-- fin UL interne -->

</li> <!-- fin LI princial -->
</ul> <!-- Fin UL principal-->

<ul>
<li><a href="#">Products</a>

<ul>

<li><a href="#">Link item</a></li>
<li><a href="#">Link item</a></li>
<li><a href="#">Link item</a></li>
<li><a href="#">Link item</a></li>
<li><a href="#">Link item</a></li>

</ul> <!-- fin UL interne -->

</li> <!-- fin LI princial -->
</ul> <!-- Fin UL principal-->

<ul>
<li><a href="#">Products</a>

<ul>

<li><a href="#">Link item</a></li>
<li><a href="#">Link item</a></li>
<li><a href="#">Link item</a></li>
<li><a href="#">Link item</a></li>
<li><a href="#">Link item</a></li>

</ul> <!-- fin UL interne -->

</li> <!-- fin LI princial -->
</ul> <!-- Fin UL principal-->

<ul>
<li><a href="#">Products</a>

<ul>

<li><a href="#">Link item</a></li>
<li><a href="#">Link item</a></li>
<li><a href="#">Link item</a></li>
<li><a href="#">Link item</a></li>
<li><a href="#">Link item</a></li>

</ul> <!-- fin UL interne -->

</li> <!-- fin LI princial -->
</ul> <!-- Fin UL principal-->

<ul>
<li><a href="#">Products</a>

<ul>

<li><a href="#">Link item</a></li>
<li><a href="#">Link item</a></li>
<li><a href="#">Link item</a></li>
<li><a href="#">Link item</a></li>
<li><a href="#">Link item</a></li>

</ul> <!-- fin UL interne -->

</li> <!-- fin LI princial -->
</ul> <!-- Fin UL principal-->

<br class="clearFloat" />

</div> <!-- Fin de navMenu -->
</div> <!-- Fin du wrapper -->
</body>
</html>


Voici le CSS : 

@charset "utf-8";
/* CSS Document */

#navMenu {
	margin:0;
	padding:0;	
}

#navMenu ul {
	margin:0;
	padding:0;
	line-height:30px;
}

#navMenu li {
	margin:0;
	padding:0;
	list-style:none;
	float:left;
	position:relative;
	background:#999;	
}

#navMenu ul li a {
	text-align:center;
	font-family:"Comic Sans MS", cursive:
	text-decoration:none;
	height:30px;
	width:150px;
	display:block;
	color:#FFF;
	border:1px solid #fff;
	text-shadow:1px 1pxx 1px #000;
}

#navMenu ul ul {
	position:absolute;
	visibility:hidden;
	top:32px;
}

#navMenu ul li:hover ul {
	visibility:visible;	
}

#navMenu li:hover {
 	background-color:#0066FF;	
}

#navMenu ul li:hover ul li a:hover {
	background:#ccc;
	color:black;	
}

#navMenu a:hover {
	color:#000;	
}
.clearFloat {
	clear:both;
	margin:0;
	padding:0;
}


En espérant que ce ne soit pas trop difficile, merci pour votre aide,

Suby
Sujet clos
Aller à