Help with CSS 2nd Level Dropmenu

HTML & CSS
1

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>
2

you are gonna kick yourself.

you are styling based on a combination of LI and A. your 3rd level doesnt have an A!
change the mark up to <li><a href=“#”>test2</a></li> and you will see it works fine.

:slight_smile:

3

Wow lol, sorry now i feel stupid, Thanks for the quick tip. Menu working fine now lol.