Submenus not showing on dropdown menu

HTML & CSS
1

Im having a problem with my drop down menu where the submenus dont show up?
this is the code i was using

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

2

oh PS- this is the site i found it on? http://www.abushaleh.net/2012/07/pure-css3-multi-drop-down-menu-for.html?showComment=1368034532810#c7334359708062407248

3

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.




(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

i took out the line but its still not working…

5

Ps what exactly do you mean bu ‘tabs outer?’ where would i find that?

6

maybe there is simpler version of a drop down menu, ill look for one because i dont really understand any of this?!

7

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


.tabs-outer {
    background: url("//www.blogblog.com/1kt/awesomeinc/tabs_gradient_artsy.png") repeat scroll 0 0 transparent;
[B]    overflow: hidden;[/B]
    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.


.tabs .widget ul, .tabs .widget ul {
    list-style: none outside none;
    margin: 0;
    [B]overflow: hidden;[/B]
    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.:slight_smile:

8

Threads merged - please reply to this thread and not that old thread that you tacked your post on to :slight_smile:

9

There’s no point because no menus will work when you have hidden the overflow. :wink: 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

oops sorry

11

okay so like where would this ‘overflow’ be?

12

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.


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

OHMyGOD OHMYGOD IT WORKS!
THANK YOU SO MUCH!

14

i dont really know what happened but i now have sub menues that SHOW! <3 <3 <3

15

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

Okay, and thanks a million!