Bonjour,
Je suis entrain de faire un menu et je n'arrive pas à réduire l'espace des titres de mon menu
Je souhaite donc rapprocher le Menu 1 de Menu 2.
Voici le code html :
<div class="container">
<ul class="menu_deroulant">
<li >
<a href="#" title="">Menu 1</a>
<ul>
<li ><a href="#">Sous menu 1</a></li>
<li><a href="#">Sous menu 2</a></li>
<li><a href="#">Sous menu 3</a></li>
<li><a href="#">Sous menu 4</a></li>
<li><a href="#">Sous menu 5</a></li>
</ul>
</li>
<li >
<a href="#" title="">Menu 2</a>
<ul>
<li ><a href="#">Sous menu 1</a></li>
<li><a href="#">Sous menu 2</a></li>
<li><a href="#">Sous menu 3</a></li>
<li><a href="#">Sous menu 4</a></li>
<li><a href="#">Sous menu 5</a></li>
</ul>
</li>
<li >
<a href="#" title="">Menu 3</a>
<ul>
<li ><a href="#">Sous menu 1</a></li>
<li><a href="#">Sous menu 2</a></li>
<li><a href="#">Sous menu 3</a></li>
<li><a href="#">Sous menu 4</a></li>
<li><a href="#">Sous menu 5</a></li>
</ul>
</li>
<li >
<a href="#" title="">Menu 4</a>
<ul>
<li ><a href="#">Sous menu 1</a></li>
<li><a href="#">Sous menu 2</a></li>
<li><a href="#">Sous menu 3</a></li>
<li><a href="#">Sous menu 4</a></li>
<li><a href="#">Sous menu 5</a></li>
</ul>
</li>
<li >
<a href="#" title="">Menu 5</a>
<ul>
<li ><a href="#">Sous menu 1</a></li>
<li><a href="#">Sous menu 2</a></li>
<li><a href="#">Sous menu 3</a></li>
<li><a href="#">Sous menu 4</a></li>
<li><a href="#">Sous menu 5</a></li>
</ul>
</li>
</ul>
</div>
Voici le code CSS :
.container{
width:1100px;
height:800px;
background-color: #FFFFFF;
}
.menu_deroulant{
padding:0;
margin: 7px;
list-style-type:none;
width: 1050px;
text-align:center;
display: table;
font-size: 14px;
font-weight: normal;
}
.menu_deroulant li{
display:table-cell;
text-align: center;
width: 110px;
}
.menu_deroulant li ul{
list-style-type: none;
display:none;
position:absolute;
}
.menu_deroulant li ul li{
display:block;
border:none;
}
html{
background-color: white;
}
a {
padding: 10px 10px 11px;
text-decoration: none;
color: #000000;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
a:hover{
/*text-decoration: underline;*/
color: #900;
}
.menu_deroulant{
background-color: #FFFFFF;
background-image: -moz-linear-gradient(center top , #333333, #222222);
background-repeat: repeat-x;
box-shadow:2px 2px 10px rgba(0,0,0,0.5);
border-radius: 5px 5px 5px 5px;
padding: 8px 0;
}
.menu_deroulant li ul{
background-color: #e9eaed;
color: #000000;
line-height: 25px;
margin: 10px;
margin-left: 30px;
padding-right: 20px;
padding-left: 20px;
border-color: rgba(0, 0, 0, 0.2);
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-width: 0 1px 1px;
box-shadow:2px 2px 10px rgba(0,0,0,0.5);
}
.menu_deroulant li ul a:hover{
text-decoration: underline;
}
Merci par avance de l'aide que vous pourrez m'apporter.
Bonne soirée
Je suis entrain de faire un menu et je n'arrive pas à réduire l'espace des titres de mon menu
Je souhaite donc rapprocher le Menu 1 de Menu 2.
Voici le code html :
<div class="container">
<ul class="menu_deroulant">
<li >
<a href="#" title="">Menu 1</a>
<ul>
<li ><a href="#">Sous menu 1</a></li>
<li><a href="#">Sous menu 2</a></li>
<li><a href="#">Sous menu 3</a></li>
<li><a href="#">Sous menu 4</a></li>
<li><a href="#">Sous menu 5</a></li>
</ul>
</li>
<li >
<a href="#" title="">Menu 2</a>
<ul>
<li ><a href="#">Sous menu 1</a></li>
<li><a href="#">Sous menu 2</a></li>
<li><a href="#">Sous menu 3</a></li>
<li><a href="#">Sous menu 4</a></li>
<li><a href="#">Sous menu 5</a></li>
</ul>
</li>
<li >
<a href="#" title="">Menu 3</a>
<ul>
<li ><a href="#">Sous menu 1</a></li>
<li><a href="#">Sous menu 2</a></li>
<li><a href="#">Sous menu 3</a></li>
<li><a href="#">Sous menu 4</a></li>
<li><a href="#">Sous menu 5</a></li>
</ul>
</li>
<li >
<a href="#" title="">Menu 4</a>
<ul>
<li ><a href="#">Sous menu 1</a></li>
<li><a href="#">Sous menu 2</a></li>
<li><a href="#">Sous menu 3</a></li>
<li><a href="#">Sous menu 4</a></li>
<li><a href="#">Sous menu 5</a></li>
</ul>
</li>
<li >
<a href="#" title="">Menu 5</a>
<ul>
<li ><a href="#">Sous menu 1</a></li>
<li><a href="#">Sous menu 2</a></li>
<li><a href="#">Sous menu 3</a></li>
<li><a href="#">Sous menu 4</a></li>
<li><a href="#">Sous menu 5</a></li>
</ul>
</li>
</ul>
</div>
Voici le code CSS :
.container{
width:1100px;
height:800px;
background-color: #FFFFFF;
}
.menu_deroulant{
padding:0;
margin: 7px;
list-style-type:none;
width: 1050px;
text-align:center;
display: table;
font-size: 14px;
font-weight: normal;
}
.menu_deroulant li{
display:table-cell;
text-align: center;
width: 110px;
}
.menu_deroulant li ul{
list-style-type: none;
display:none;
position:absolute;
}
.menu_deroulant li ul li{
display:block;
border:none;
}
html{
background-color: white;
}
a {
padding: 10px 10px 11px;
text-decoration: none;
color: #000000;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
a:hover{
/*text-decoration: underline;*/
color: #900;
}
.menu_deroulant{
background-color: #FFFFFF;
background-image: -moz-linear-gradient(center top , #333333, #222222);
background-repeat: repeat-x;
box-shadow:2px 2px 10px rgba(0,0,0,0.5);
border-radius: 5px 5px 5px 5px;
padding: 8px 0;
}
.menu_deroulant li ul{
background-color: #e9eaed;
color: #000000;
line-height: 25px;
margin: 10px;
margin-left: 30px;
padding-right: 20px;
padding-left: 20px;
border-color: rgba(0, 0, 0, 0.2);
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-width: 0 1px 1px;
box-shadow:2px 2px 10px rgba(0,0,0,0.5);
}
.menu_deroulant li ul a:hover{
text-decoration: underline;
}
Merci par avance de l'aide que vous pourrez m'apporter.
Bonne soirée