Hi guys,
Having problem creating / formating the 2nd level submenu for my website.
Here is what i got so far :
Here is my CSS :
#navigation_panel {background:#F93; height:50px;}
#menu{border:none;border:0px;margin:0px;padding:0px 0px 0px 30px;list-style: none;font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;font-size:16px;font-weight:bold;}
#menu ul{background:#F93;height:50px;list-style:none;margin:0;padding:0;-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px; -webkit-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);-moz-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);}
#menu li{float:left;padding:0px 0px 0px 5px;}
#menu li a{color:#000;display:block;font-weight:normal;line-height:50px;margin:0px;padding:0px 25px;text-align:center;text-decoration:none;}
#menu li a:hover{background:#C60;color:#FFFFFF;text-decoration:none;-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);-moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);}
#menu ul li:hover a{background:#C60;color:#FFFFFF;text-decoration:none;}
#menu li ul{display:none;height:auto;padding:0px;margin:0px;border:0px;position:absolute;width:200px;z-index:200;}
#menu li:hover ul{display:block}
#menu li:hover ul{display:block}/* show first level*/
#menu li:hover ul ul{display:none}/* hide nested level*/
#menu li li:hover ul{/* show second nested level*/
display:block;
left:100%;
top:0;
}
/* make hopver persistent on chosen item */
#menu li:hover > a,
#menu li li:hover > a{background:#C60;color:#ffffff;text-decoration:none;border:0px;-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);-moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
}
#menu li li {position:relative;display:block;float:none;margin:0px;padding:0px;width:200px;background:#F93;background-image:none;}
#menu li:hover li a{background:none;}
#menu li ul a{display:block;height:50px;font-size:14px;font-style:normal;margin:0px;padding:0px 10px 0px 15px;text-align:left;}
#menu li ul a:hover, .menu li ul li:hover a{border:0px;color:#ffffff;text-decoration:none;background:#C60;-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);-moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3); }
My HTML :
<div id="navigation_panel">
<ul id="menu">
<li><a href="index.html">Informations</a>
<ul>
<li><a href="programmation.html">Programmation</a></li>
<li><a href="mission-objectifs.html">Mission / Objectifs</a></li>
</ul>
</li>
<li><a href="inscription.html">Inscription</a></li>
<li><a href="site.html">Site</a>
<ul>
<li><a href="jeux.html">Jeux</a></li>
<li><a href="chalets.html">Chalets</a></li>
</ul>
</li>
<li><a href="media.html">Média</a>
<ul>
<li><a href="photos.html">Photos</a></li>
<li><a href="videos.html">Vidéos</a></li>
<li><a href="chansons.html">Chansons</a></li>
<li><a href="temoignages.html">Témoignages</a>
<ul>
<li>test1</li>
<li>test2</li>
</ul>
</li>
<li><a href="histoires-legendes.html">Histoires / Légendes</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>