SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Member
    Join Date
    May 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Submenus not showing on dropdown menu

    Im having a problem with my drop down menu where the submenus dont show up?
    this is the code i was using
    Code:
     
    <style type="text/css">
    #nav {
     float: left;
     font: bold 12px Arial, Helvetica, Sans-serif;
     border: 1px solid #121314;
     border-top: 1px solid #2b2e30;
     overflow: hidden;
     width: 100%;
     background: #3C4042;
     background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
     background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
     background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
    }
    
    #nav ul {
     margin: 0;
     padding: 0;
     list-style: none;
    }
    
    #nav ul li {
     float: left;
    }
    
    #nav ul li a {
     float: left;
     color: #d4d4d4;
     padding: 10px 20px;
     text-decoration: none;
     background: #3C4042;
     background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
     background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
     background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
     border-left: 1px solid rgba(255, 255, 255, 0.05);
     border-right: 1px solid rgba(0,0,0,0.2);
     text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
    }
    #nav ul li a:hover,
    #nav ul li:hover > a {
     color: #252525;
     background: #3C4042;
     background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
     background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
     background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
    }
    
    #nav li ul a:hover,
    #nav ul li li:hover > a {
     color: #2c2c2c;
     background: #5C9ACD;
     background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
     background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
     background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
     border-bottom: 1px solid rgba(0,0,0,0.6);
     border-top: 1px solid #7BAED9;
     text-shadow: 0 1px rgba(255, 255, 255, 0.3);
    }
    #nav li ul {
     background: #3C4042;
     background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
     background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
     background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
     left: -999em;
     margin: 35px 0 0;
     position: absolute;
     width: 160px;
     z-index: 9999;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
     -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
     -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
     border: 1px solid rgba(0, 0, 0, 0.5);
    }
    
    #nav li:hover ul {
     left: auto;
    }
    
    #nav li ul a {
     background: none;
     border: 0 none;
     margin-right: 0;
     width: 120px;
     box-shadow: none;
     -moz-box-shadow: none;
     -webkit-box-shadow: none;
     border-bottom: 1px solid transparent;
     border-top: 1px solid transparent;
    }
    
    .nav ul li ul {
        position: absolute;
        left: 0;
        display: none;
        visibility: hidden;
    }
    
    .nav ul li ul li {
        display: list-item;
        float: none;
    }
    
    .nav ul li ul li ul {
        top: 0;
    }
    
    .nav ul li ul li a {
        font: normal 13px Verdana;
        width: 160px;
        padding: 5px;
        margin: 0;
        border-top-width: 0;
        border-bottom: 1px solid gray;
    }
    
    #nav li li ul {
     margin: -1px 0 0 160px;
     visibility: hidden;
    }
    
    #nav li li:hover ul {
     visibility: visible;
    }
    </style>
    <div id="nav">
     <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Our Portfolio</a></li>
      <li><a href="#">One Dropdown</a></li>
      <li><a href="#">Three Levels</a>
      <ul>
       <li><a href="#">Level 2.1</a></li>
       <li><a href="#">Level 2.2</a></li>
       <li><a href="#">Level 2.3</a></li>
       <li><a href="#">Level 2.4</a></li>
       <li><a href="#">Level 2.5</a></li>
      </ul>
      </li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact Us</a></li>
     </ul>
    </div>
    Any idea how to fix that? This is the link to the site http://vassalisia.blogspot.ca/
    Last edited by Paul O'B; May 8, 2013 at 12:12. Reason: code tags added

  2. #2
    SitePoint Member
    Join Date
    May 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh PS- this is the site i found it on? http://www.abushaleh.net/2012/07/pur...59708062407248

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

    On tabs-outer you have hidden the overflow which means that nothing will show outside including your dropdown menu.

    Remove the overflow and the menu will show.
    Code:
    
    (You shouldn't have so much css in the head and those style tags in the body should be moved also as they shouldn't be mixed in with the html of the body.)
    
    .tabs-outer{
    overflow:hidden;/* remove this line*/
    
    }

  4. #4
    SitePoint Member
    Join Date
    May 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i took out the line but its still not working...

  5. #5
    SitePoint Member
    Join Date
    May 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ps what exactly do you mean bu 'tabs outer?' where would i find that?

  6. #6
    SitePoint Member
    Join Date
    May 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    maybe there is simpler version of a drop down menu, ill look for one because i dont really understand any of this?!

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,823
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by vassa View Post
    i took out the line but its still not working...

    No you didn't as the line is still here at line 320:

    Code:
    .tabs-outer {
        background: url("//www.blogblog.com/1kt/awesomeinc/tabs_gradient_artsy.png") repeat scroll 0 0 transparent;
        overflow: hidden;
        position: relative;
    }
    Also you have now changed the code since I looked at it a minute ago and you have added another overflow:hidden here also.


    Code:
    .tabs .widget ul, .tabs .widget ul {
        list-style: none outside none;
        margin: 0;
        overflow: hidden;
        padding: 0;
    }
    You can't hide the overflow if you want the menu to show outside of the height you have set.


    I have tested on your live site twice now using firebug and the menu will display with the changes I've specified unless you have added more rules since I checked.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,823
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Threads merged - please reply to this thread and not that old thread that you tacked your post on to

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,823
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by vassa View Post
    maybe there is simpler version of a drop down menu, ill look for one because i dont really understand any of this?!
    There's no point because no menus will work when you have hidden the overflow. A dropdown menu needs to show outside of the parent container so you cannot hide the overflow on any parent elements that contain the menu or indeed on the menu itself.

  10. #10
    SitePoint Member
    Join Date
    May 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oops sorry

  11. #11
    SitePoint Member
    Join Date
    May 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    okay so like where would this 'overflow' be?

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,823
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Your page seems to keep changing each time I look at it but if you still have the black menu in place and not the purple one then add this to the css it will counteract the rule I mentioned above.

    Code:
    .tabs-outer{overflow:visible!important}

  13. #13
    SitePoint Member
    Join Date
    May 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OHMyGOD OHMYGOD IT WORKS!
    THANK YOU SO MUCH!

  14. #14
    SitePoint Member
    Join Date
    May 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i dont really know what happened but i now have sub menues that SHOW! <3 <3 <3

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,823
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    HI,

    Under the menu item "three levels" I am seeing a sub menu as expected.

    Make sure to clear your cache each time you make a change.

  16. #16
    SitePoint Member
    Join Date
    May 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, and thanks a million!


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
  •