Add CSS 2nd Level Sub Menu

HTML & CSS
1

Hi everyone,

I currently have a CSS dropdown menu, i would like to know how to add a 2nd level submenu to it (On the right).

My website : jsinformation.com

Here is my CSS code :

#navigation_panel {position:absolute;left:12px;top:40px}
#menu{border:none;border:0px;margin:0px;padding:0px 0px 0px 0px;list-style: none;font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:bold;text-transform:uppercase;}
#menu ul{background:#454545;height:40px;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;background:url(images/divider2.gif) repeat-y right top}
#menu li a{color:#E0E0E0;display:block;font-weight:bold;line-height:40px;margin:0px;padding:0px 25px;text-align:center;text-decoration:none;}
#menu li a:hover{color:#FFFFFF;text-decoration:underline;-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{color:#FFFFFF;text-decoration:underline;}
#menu li ul{display:none;height:auto;padding:0px;margin:0px;border:0px;position:absolute;width:190px;z-index:200;}
#menu li:hover ul{display:block; }
#menu li li {display:block;float:none;margin:0px;padding:0px;width:190px;}
#menu li:hover li a{background:none;}
#menu li ul a{display:block;height:40px;font-size:12px;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); }

Here is my HTML :

<div id="navigation_panel">
  <ul id="menu">
  <li><a href="index.html">Home</a>
      <ul>
      <li><a href="about-us.html">About Us</a></li>
    </ul>
  </li>
    <li><a href="services.html">Services</a>
    <ul>
      <li><a href="phone-unlocking-moncton.html">Phone Unlocking</a></li>
	  <li><a href="iphone-ipad-ipod-repair-moncton.html">IPhone / IPad / iPod Repair</a>
               <ul>
               <li><a href="new_page.html">[B]NEW LINK HERE[/B]</a></li>
               </ul>
              </li>
	  <li><a href="computer-repair-moncton.html">Computer Repair</a></li>
	  <li><a href="computer-sales-moncton.html">Computer Sales</a></li>
	  <li><a href="data-backup-recovery-moncton.html">Data backup</a></li>
	  <li><a href="website-design-hosting-moncton.html">Web design & hosting</a></li>
    </ul>
  </li>
      <li><a href="#">Support</a>
    <ul>
	  <li><a href="sitemap.html">Site Map</a></li>
	  <li><a href="news.html">News Archive</a></li>
	  <li><a href="terms-and-conditions.html">Terms & Conditions</a></li>
    </ul>
  </li>
      <li><a href="testimonials.html">Testimonials</a></li>
  <li><a href="contact-us.html">Contact Us</a></li>
</ul>
</div>

Thank you for the help, i’ve included a picture of what i would like to do with my menu…

2

Hi,

You just nest another ul inside the appropriate list element and then reveal it with left:100% and display:block.

e.g.




#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{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);
}




<div id="navigation_panel">
										<ul id="menu">
												<li><a href="index.html">Home</a>
														<ul>
																<li><a href="about-us.html">About Us</a></li>
														</ul>
												</li>
												<li><a href="services.html">Services</a>
														<ul>
																<li><a href="phone-unlocking-moncton.html">iPhone Unlocking</a>
																<ul>
																<li><a href="#">Sub sub menu</a></li>
																<li><a href="#">Sub sub menu</a></li>
																<li><a href="#">Sub sub menu</a></li>
																<li><a href="#">Sub sub menu</a></li>
																<li><a href="#">Sub sub menu</a></li>
																</ul>
																</li>
																<li><a href="iphone-ipad-ipod-repair-moncton.html">iPhone / iPad / iPod Repair</a></li>
																<li><a href="computer-repair-moncton.html">Computer Repair</a></li>
																<li><a href="computer-sales-moncton.html">Computer Sales</a></li>
																<li><a href="data-backup-recovery-moncton.html">Data backup</a></li>
																<li><a href="website-design-hosting-moncton.html">Web design & hosting</a></li>
														</ul>
												</li>
												<li><a href="#">Support</a>
														<ul>
																<li><a href="sitemap.html">Site Map</a></li>
																<li><a href="news.html">News Archive</a></li>
																<li><a href="terms-and-conditions.html">Terms & Conditions</a></li>
														</ul>
												</li>
												<li><a href="testimonials.html">Testimonials</a></li>
												<li><a href="contact-us.html">Contact Us</a></li>
										</ul>
								</div>
3

Thank for the reply, that did the trick.

Now, is there a way i can make the submenu items list down instead of going up ? …

I added a picture to explain what i am looking for …

Thanks in advanced for all the help ! this forum rocks

4

Hi,

yes just add this:


#menu li li{
position:relative;/* stacking context for sub menu */
background-image:none;/* get rid of border on nested menus*/
}
5

Awsome, that did the trick :slight_smile: thanks again !!