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…