SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Add CSS 2nd Level Sub Menu

    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

    2nd_level_menu.JPG


    Here is my CSS code :

    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 :

    Code:
    <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">NEW LINK HERE</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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    e.g.

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


    Code:
    <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. #3
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ....

    css_menu.JPG

    Thanks in advanced for all the help ! this forum rocks

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    yes just add this:

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

  5. #5
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awsome, that did the trick :-) thanks again !!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •