CSS3 drop down menu cut off

[ianhaney]

Hi

in my website http://www.irhtoys.co.uk, if I hover out the toys and then mattel toys, there should be a another menu that flies out from there, I can see a bit of it, by looks of it, it looks cut off

Any ideas

Below is the CSS3 styles for that menu

#nav {

margin: 0;

padding: 7px 6px 0;

line-height: 100%;

-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

background: #8b8b8b; /* for non-css3 browsers */

background-color: #18D418;

border: solid 1px #6d6d6d;

behavior: url(PIE.htc);

}

#nav li {

margin: 0 4px;

margin-left: 25px;

padding: 0 0 8px;

float: left;

position: relative;

list-style: none;

behavior: url(PIE.htc);

}

/* main level link */

#nav a {

border-radius: 2em;

-moz-border-radius: 2em;

font-weight: bold;

color: #000000;

text-decoration: none;

display: block;

padding:  8px 20px;

margin: 0;

text-shadow: 0 0px 0px rgba(0, 0, 0, .3);

background-color: #F6A828;

behavior: url(PIE.htc);

}

/* main level link hover */

#nav .current a, #nav li:hover > a {

background: #d1d1d1; /* for non-css3 browsers */

filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#a1a1a1'); /* for IE */

background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#a1a1a1)); /* for webkit browsers */

background: -moz-linear-gradient(top,  #ebebeb,  #a1a1a1); /* for firefox 3.6+ */

color: #FFFFFF;

border-top: solid 1px #f8f8f8;

-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);

-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);

box-shadow: 0 1px 1px rgba(0, 0, 0, .2);

text-shadow: 0 0px 0 rgba(255, 255, 255, .8);

behavior: url(PIE.htc);

}

/* sub levels link hover */

#nav ul li:hover a, #nav li:hover li a {

background: none;

border: none;

color: #666;

-webkit-box-shadow: none;

-moz-box-shadow: none;

behavior: url(PIE.htc);

}

#nav ul a:hover {

background: #0399d4 !important; /* for non-css3 browsers */

filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#04acec', endColorstr='#0186ba'); /* for IE */

background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)) !important; /* for webkit browsers */

background: -moz-linear-gradient(top,  #04acec,  #0186ba) !important; /* for firefox 3.6+ */



color: #fff !important;

text-shadow: 0 1px 1px rgba(0, 0, 0, .1);

behavior: url(PIE.htc);

}

/* level 2 list */

#nav ul {

border-radius: 2em;

-moz-border-radius: 2em;

background: #ddd; /* for non-css3 browsers */

filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cfcfcf'); /* for IE */

background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cfcfcf)); /* for webkit browsers */

background: -moz-linear-gradient(top,  #fff,  #cfcfcf); /* for firefox 3.6+ */



display: none;

margin: 0;

padding: 0;

width: 185px;

position: absolute;

top: 35px;

left: 0;

border: solid 1px #b4b4b4;

-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);

-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);

box-shadow: 0 1px 3px rgba(0, 0, 0, .3);

z-index: 1000;

behavior: url(PIE.htc);

}

/* dropdown */

#nav li:hover > ul {

display: block;

behavior: url(PIE.htc);

}

#nav ul li {

float: none;

margin: 0;

padding: 0;

behavior: url(PIE.htc);

}

#nav ul a {

font-weight: normal;

text-shadow: 0 1px 1px rgba(255, 255, 255, .9);

behavior: url(PIE.htc);

}

/* level 3+ list */

#nav ul ul {

left: 181px;

top: -3px;

behavior: url(PIE.htc);

}

/* rounded corners for first and last child */

#nav ul li:first-child > a {

-webkit-border-top-left-radius: 9px;

-moz-border-radius-topleft: 9px;

-webkit-border-top-right-radius: 9px;

-moz-border-radius-topright: 9px;

position: relative;

}

#nav ul li:last-child > a {

-webkit-border-bottom-left-radius: 9px;

-moz-border-radius-bottomleft: 9px;

-webkit-border-bottom-right-radius: 9px;

-moz-border-radius-bottomright: 9px;

}

/* clearfix */

#nav:after {

content: ".";

display: block;

clear: both;

visibility: visible;

line-height: 0;

height: 0;

}

#nav {

display: inline-block;

behavior: url(PIE.htc);



}

html[xmlns] #nav {

display: block;

behavior: url(PIE.htc);

}

* html #nav {

height: 1%;

behavior: url(PIE.htc);

}

[ianhaney]

Hello

I have fixed it

I had the following in my stylesheet.css, I just removed it, it was preventing the third multi level fly out from appearing, apparently is is coding to hide the fly out menu or something and I also have rounded corners out where I had squares so all fixed

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ebebeb’, endColorstr=’#a1a1a1′); /* for IE */

[Author]

Posts