6. Menú acordeón vertical!!! Fuente HTML Lien menu 1 < / a > lien sous menu... -

01.12.2014

6. Menú acordeón vertical!!! Fuente
HTML

<ul id="menu-accordeon">
<li><a href="#">Lien menu 1</a>
<ul>
<li><a href="#">lien sous menu 1</a></li>
<li><a href="#">lien sous menu 1</a></li>
<li><a href="#">lien sous menu 1</a></li>
<li><a href="#">lien sous menu 1</a></li>
</ul>   </li>
<li><a href="#">Lien menu 2</a>
<ul>
<li><a href="#">Lien sous menu 2</a></li>
<li><a href="#">Lien sous menu 2</a></li>
<li><a href="#">Lien sous menu 2</a></li>
<li><a href="#">Lien sous menu 2</a></li>
</ul>   </li>   <li><a href="#">Lien menu 3</a>
<ul>   <li><a href="#">Lien sous menu 3</a></li>
<li><a href="#">Lien sous menu 3</a></li>
<li><a href="#">Lien sous menu 3</a></li>
<li><a href="#">Lien sous menu 3</a></li>
</ul>   </li> </ul>

CSS (552- 593)

#menu-accordeon {
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
  width: 180px; }
#menu-accordeon ul {
  padding:0; margin:0;
  list-style:none;
  text-align: center; }
#menu-accordeon li {
  background-color:#729EBF;
  background-image:-webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
  background-image: linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
  border-radius: 6px;
  margin-bottom:2px;
  box-shadow: 3px 3px 3px #999;
  border:solid 1px #333A40 }
#menu-accordeon li li {
  max-height:0;   overflow: hidden;
  transition: all .5s;
  border-radius:0;
  background: #444;
  box-shadow: none;
  border:none;
  margin:0 }
#menu-accordeon a {
  display:block;
  text-decoration: none;
  color: #fff; padding: 8px 0;
  font-family: verdana;
  font-size:1.2em }
#menu-accordeon ul li a,
#menu-accordeon li:hover li a {
  font-size:1em }
#menu-accordeon li:hover {
  background: #729EBF }
#menu-accordeon li li:hover {
  background: #999; }
#menu-accordeon ul li:last-child {
  border-radius: 0 0 6px 6px;
  border:none; }
#menu-accordeon li:hover li {
  max-height: 15em; }