| Re: menu déroulant |
Titre du sujet : Re: menu déroulant
par slider84 sur 23/08/2013 19:09:18
Si cela peut aider, ci dessous un petit menu que j'utilise parfois et qui marche trés bien:
Le html:
<div class="userboutons">
<ul id="nav">
<li><a href="#">Menu1</a>
<ul>
<li><a href="#">Menu1_item1</a></li>
<li><a href="#">Menu1_item2</a></li>
<li><a href="#">Menu1_item3</a></li>
</ul>
<div class="clear"></div>
</li>
<li><a href="#">Menu2</a>
<ul>
<li><a href="#">Menu2_item1</a></li>
<li><a href="#">Menu2_item2</a></li>
<li><a href="#">Menu2_item3</a></li>
<li><a href="#">Menu2_item4</a></li>
</ul>
<div class="clear"></div>
</li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
</ul>
<div class="clear"></div>
</div>
Le css:
.clear {clear:both}
#nav {
margin:0;
padding:0;
list-style:none;
}
#nav li {
float:left;
display:block;
width:100px;
background:#222222;
position:relative;
z-index:1;
margin:0 1px;
border : 1px solid #444444;
}
#nav li a {
display:block;
padding:5px 2px 0 2px;
height:18px;
text-decoration:none;
text-align:center;
color:#ffffff;
}
#nav li a:hover {
color:#fff;
background:#c00014;
}
#nav a.selected {
color:#f00;
}
#nav ul {
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
}
#nav ul li {
width:100px;
float:left;
border-left : 1px solid #444444;
border-right : 1px solid #444444;
border-top : none;
border-bottom : none;
}
#nav ul a {
display:block;
height:15px;
padding: 5px 5px;
color:#ffffff;
}
#nav ul a:hover {
text-decoration:none;
background-color:#c00014;
}
|
|
