Bonjour à tous je suis en pleine création d'un menu déroulant html css jquery et mon problème est que dans ce menu l'espacement vertical des <li> est de près de 15px mais je n'arrive pas à le diminuer... j'ai déja essayé ligne height sous toutes ses formes, margin et padding et même font-size et rien mes li sont toujours aussi espacées. C'est un menu se déroulant horizontalement tout le long de la page je vous épargne le long code et le javascript en ne postant que le 1er onglet du menu c'est à dire services et son css... répondez moi vite j'agonise.
<li id="mmmenu" class="toggleSubMenu" ><span><a href="#"> Produits:</a></span>
<ul class="subMenu">
<ul style= "float:left" class="line" ><a href="pageprod.php" title="Aller à la page 2.1">Prod1</a>
<div id="ssm1"><li><a href="pageprod.php" title="Aller à la page 2.1">Prod2</a></li>
</ul>
<ul style= "float:left" class="line" ><a href="crm.php" title="Aller à la page 2.2">Prod3:<br><br></a>
<div id="ssm"><li><a href="sugar.php" title="Aller à la page sugar">sp</a></li>
<li><a href="pageprod.php" title="Aller à la page 2.1">sp</a></li>
<li><a href="pageprod.php" title="Aller à la page 2.1">sp</a></li>
<li><a href="pageprod.php" title="Aller à la page 2.1">sp</a></li>
<li><a href="pageprod.php" title="Aller à la page 2.1">sp</a></li></div>
</ul>
<ul style= "float:left" class="line"><a href="pageprod.php" title="Aller à la page 2.3">Prod4<br><br></a>
<div id="ssm"><li><a href="pageprod.php" title="Aller à la page 2.1">sp</a></li>
<li><a href="pageprod.php" title="Aller à la page 2.1">sp</a></li>
<li><a href="pageprod.php" title="Aller à la page 2.1">sp</a></li></div>
</ul>
<ul style= "float:left" class="line"><a href="pageprod.php" title="Aller à la page 2.3">Prod5<br><br></a>
<div id="ssm1"><li><a href="pageprod.php" title="Aller à la page 2.1">sp</a></li>
<li><a href="pageprod.php" title="Aller à la page 2.1">sp</a></li>
<li><a href="pageprod.php" title="Aller à la page 2.1">sp</a></li>
<li><a href="pageprod.php" title="Aller à la page 2.1">sp</a></li>
<li><a href="pageprod.php" title="Aller à la page 2.1">sp</a></li>
<li><a href="pageprod.php" title="Aller à la page 2.1">sp</a></li></div>
</ul>
</ul>
</li>
.toggleSubMenu {
text-align:center;
font-size: 20px;
font-family:GeosansLight,GeosansLight ;
}
.head {
width: 100%;
height: 20px;
}
.navigation {
padding: 0;
list-style: none;
background: #000;
position: absolute;
left: 0%;
top:5px;
min-width: 1100px;
width: 100%;
font: 1.2em "Trebuchet MS", sans-serif;
}
.navigation a, .navigation span {
display: block;
height: 50px;
color: white;
text-decoration: none;
}
.navigation a:hover, .navigation a:focus{
text-decoration: underline;
font-size: 21px;
font-weight: bold;
}
.navigation .subMenu {
font-size: .8em;
background-color: black ;
opacity: 0.7;
font-size: .9em;
position: absolute;
top: 47px;
left: 0px;
margin-left:0px;
border: 0px ;
float: left;
width: 100%;
min-width: 900px;
z-index: 2;
}
.navigation ul.subMenu a {
background: none;
padding: 3px 20px;
margin-left:0px;
}
.line a {
font-weight: bolder;
}
.ssmenu a{
line-height:0px;
}
.ssmenu br
{
margin-top: 2px;
}
.line li {
font-size: 15px;
padding: 0px ;
}
#mmenu {
float: right;
width:180px;
text-align: center;
}
#mmmenu {
float: right;
width:180px;
}