Problema con menù a tendina

**Simca88** · 21-12-2011, 22:22

Ciao a tutti ragazzi!
Come da titolo ho un problema con un menù a tendina, mi spiego meglio.
Praticamente ora funziona che dopo che io vado su un pulsante mi si apre sotto il menù a tendina, ma ha un'animazione quando compare, scorre piano piano verso il basso fino ad apparire tutto. Io invece vorrei che dopo che vado sul pulsante appare direttamente tutto, non voglio vedere l'animazione del menù che scende.
Qui sotto vi posto il codice html nella speranza che possiate aiutarmi a trovare la parte da modificare, perchè è una giornata che ci sto sopra e non lo trovo.
Grazie a tutti in anticipo e colgo l'occasione per augurarvi buon natale.

codice:

 
/* Clearfix
-------------------------------------------------------------*/
* html .clearfix {
	height: 1%; /* IE5-6 */
}
html[xmlns] .clearfix { /* O */
	display: block;  
}

.clearfix:after { /* FF, O, etc. */
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.wrap {
	height: auto !important;
	visibility: visible !important;
	border: 0 none;
    clear: both;
    float: none;
    font-size: 1px;
    line-height: 1px;
    margin: 0;
    padding: 0;
}
ul {
    list-style: none outside none;
}

div.js-moduletable ul, div.js-module ul {
    margin: 10px !important;
}
#js-mainnav { 
       background: white none repeat-x; /* you can change/delete the transparent gradient image or the background color */
       border-top: 0px solid #3A0700; /* you can change the color of the border */
       line-height: 1;
       position: relative;
	z-index: 9;
} 
.js-megamenu { margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; font-size: 13px;
}
.js-megamenu a.over, .js-megamenu a.active { 
	color: #0F1FFF !important;
	background-color: EEEEEE;
}
ul.megamenu { margin: 10px; /* menu's gutter */ } 
ul.megamenu.level1 {

	padding: 0;
}
/* lv - 0
-----------------------------------*/
/* Styling ---*/
ul.level0 { 
    	
    border-right:0px solid #014E72; /* you can remove/comment this line or move the border to the left*/ 
    float: none;
    margin:30;
	background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#EEEEEE));
	padding: 1;
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 0px 0x 0px 0px;
} 
ul.level0 li.mega {
	background: transparent;
	display: block;
	float: left;
	margin: 0;
	padding-top: 5px;
	
}
ul.level0 li.mega a.mega { 
    border-left: 0px solid #014E72; /* you should comment/delete this line */ 
    border-right: 0px solid #333333; /* and this line */ 
    color: #cccccc;
    display: block;
    font-weight: bold;
    text-decoration: none;
	line-height: 6px;
	padding: 5px 8px;
}
ul.level0 li.mega .has-image {
	display: block;
	background-repeat: no-repeat;
	background-position: left top;
	cursor: pointer;
	padding-left: 25px;
}
span.menu-image{
	background-position: left 1px;
    background-repeat: no-repeat;
    display: block;
    overflow: hidden;
	padding-left: 21px;
}
ul.level0 li.mega span.menu-title { display: block;}

ul.level0 li.mega span.menu-desc {
	display: block;
	font-weight: normal;
	font-size: 92%;
	color: #999;
	padding-top: 7px;
}

ul.level0 li.mega a img {
	float: left;
	padding-right: 5px;
}
ul.level0 li.over, 
ul.level0 li.haschild-over { 
    border:1px solid #b7b7b7;
	padding: 0px 0px;
	/*rounded corners to the top left and right */
   border-radius:5px 5px 0 0;
	-moz-border-radius:5px 5px 0 0;
	-webkit-border-radius:5px 5px 0 0;
    background: white repeat-x;
} 

ul.level0 li.haschild a.mega span.menu-title,
ul.level0 li.haschild-over a.mega span.menu-title {
	background: url(../images/arrow3.png) no-repeat scroll left center;
	padding-left: 12px;
}

ul.level0 li.haschild a.mega span.menu-desc,
ul.level0 li.haschild-over a.mega span.menu-desc {
	padding-left: 12px;
}

ul.level0 li.active { 
    background: transparent repeat-x;
} 

ul.level0 li #current.active {
	background: black;
}
/* lv - 1 and below
-----------------------------------*/

/* Layout ---*/
.js-megamenu li.mega .childcontent { display: block; height: auto; position: absolute; }

.js-megamenu li.mega .childcontent,
.js-megamenu li.haschild-over li.mega .childcontent,
.js-megamenu li.mega li.haschild-over li.mega .childcontent ,
.js-megamenu li.mega li.mega li.haschild-over li.mega .childcontent, 
.js-megamenu li.mega li.mega li.mega li.haschild-over li.mega .childcontent, 
.js-megamenu li.mega li.mega li.mega li.mega li.haschild-over li.mega .childcontent { left: -999em; /*hide the menu*/ }

.js-megamenu li.haschild-over .childcontent,
.js-megamenu li.mega li.haschild-over .childcontent,
.js-megamenu li.mega li.mega li.haschild-over .childcontent,
.js-megamenu li.mega li.mega li.mega li.haschild-over .childcontent,
.js-megamenu li.mega li.mega li.mega li.mega li.haschild-over .childcontent,
.js-megamenu li.mega li.mega li.mega li.mega li.mega li.haschild-over .childcontent { left: auto;
}

.js-megamenu li.mega .right,
.js-megamenu li.haschild-over li.mega .right,
.js-megamenu li.mega li.haschild-over li.mega .right ,
.js-megamenu li.mega li.mega li.haschild-over li.mega .right, 
.js-megamenu li.mega li.mega li.mega li.haschild-over li.mega .right, 
.js-megamenu li.mega li.mega li.mega li.mega li.haschild-over li.mega .right { right: auto; /*hide the menu*/ }

.js-megamenu li.haschild-over .right
{ right: 0; /*show on parent:hover*/ }
.js-megamenu li.mega li.haschild-over .right,
.js-megamenu li.mega li.mega li.haschild-over .right,
.js-megamenu li.mega li.mega li.mega li.haschild-over .right,
.js-megamenu li.mega li.mega li.mega li.mega li.haschild-over .right,
.js-megamenu li.mega li.mega li.mega li.mega li.mega li.haschild-over .right 
{ right: 12em; /*show on parent:hover*/ }

ul.level1 li.mega { float: none; }

ul.level1 .childcontent { margin: -2em 0 0 160px; }

 /* Columns ---*/
.megacol { float: left; border-top: 1px solid #001A26;}
/*
.cols1 .megacol { width: 100px }
.cols2 .megacol { width: 50%; }
.cols3 .megacol { width: 33.3%; }
.cols4 .megacol { width: 25%; }
.cols5 .megacol { width: 20%; }
.cols6 .megacol { width: 16.6%; }
.cols7 .megacol { width: 14.2%; }
.cols8 .megacol { width: 12.5%; }
.cols9 .megacol { width: 11.1%; }
.cols10 .megacol { width: 10%; }


.js-megamenu .cols1 { width: 300px; }
.js-megamenu .cols2 { width: 400px; }
.js-megamenu .cols3 { width: 600px; }
.js-megamenu .cols4 { width: 800px; }
.js-megamenu .cols5 { width: 1000px; }
.js-megamenu .cols6 { width: 1200px; }
.js-megamenu .cols7 { width: 1400px; }
.js-megamenu .cols8 { width: 1800px; }
.js-megamenu .cols9 { width: 2000px; }
.js-megamenu .cols10 { width: 2200px; }
*/

/* Styling ---*/
ul.level1 li.mega { border-top: 1px dotted #003652; background: none; }

ul.level1 li.first { border-top: 0; }

ul.level1 li.mega a.mega {
	background: none;
	border: 0;
	color: #cccccc;
	font-weight: normal;
	padding: 8px 10px;
}
ul.level1 li.mega a.mega span.menu-title { background: none; padding: 0; }

ul.level1 li.haschild,
ul.level1 li.haschild-over {
	background-image: url(../images/arrow.png);
	background-repeat: no-repeat;
	background-position: 95% center;
	padding: 0;
}
ul.level1 li.over, ul.level1 li.haschild-over { background-color: #00527C;
} 

ul.level1 li.group { background: none; }

 /* CHILD CONTENT
-----------------------------------*/
.childcontent { 
    z-index: 999;
} 
.childcontent-inner {
	background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
	border-right: 0px solid #3A0700;
	color: #ccc; /* after changing code above, you might want to change this color to make the text color readable  */ 
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: -moz-use-text-color #001A26 #001A26;
    border-style: none solid solid;
    border-width: 0 0px 0px;
	border-bottom: 0px solid #006699;
	padding-bottom: 7px;
	-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}

.childcontent .js-moduletable {
	color: #ccc;
	border-bottom: 0;
	line-height: 1.5;
	margin: 10px 0;
	padding: 0;
}
.childcontent-inner a {
	color: #424748;
	text-decoration: none;
	width: 180px
}
.childcontent-inner .group ul li.active{
	background-color: #00527C !important;
}
.childcontent .group h3 {
	background: none;
	color: #fff;
	border-bottom: 1px dotted #006699;
	text-transform: none;
	padding: 0 5px 8px;
}
.childcontent .group .moduletable {
	background: none;
	padding-top: 5px;
}
.childcontent .js-moduletable .js-box-ct {
	padding: 0 5px;
}

.childcontent .js-moduletable a {
	color: #ccc;
	text-decoration: none;
	border-bottom: 1px dotted #ccc;
}

.childcontent .js-moduletable a:hover,
.childcontent .js-moduletable a:focus,
.childcontent .js-moduletable a:active {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid #fff;
}

.childcontent .js-moduletable ul:first-child {
	margin-top: 0 !important;
}

.childcontent .js-moduletable li {

	margin-bottom: 5px;
}

/* Grouped --- */
.group {}

.group-title {
	border-bottom: 0px solid #006699;
	overflow: hidden;
	padding-top: 0px;
}

.group-title .menu-title {
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 115%;
}

.group-title .menu-desc {
	color: #999;
	padding-left: 0 !important;
}

.group-content .js-moduletable,
.group-content ul.megamenu  {
	margin: 10px; /* Group-content's gutter*/
	padding: 0;
}

/* reset --- */
.childcontent ul.megamenu .js-moduletable {
	padding: 0;
}

.childcontent ul.megamenu .js-moduletable h3 {
	margin-left: 0;
	margin-right: 0;
}

**Vincent.Zeno** · 21-12-2011, 22:32

modifica inserendo il codice nel tag CODE,
come da regolamento, grazie

**Simca88** · 21-12-2011, 22:54

Ok lo modifico subito, chiedo scusa

**Simca88** · 22-12-2011, 13:37

Ragazzi il programma con cui sono partita per creare il menù è CSS, solo che mi fa questa animazione che non vorrei, perchè ho visto in un sito sempre fatto con CSS che questa animazione può essere tolta.
E' un problema di codice oppure un opzione che va modificata del programma?

Discussione: Problema con menù a tendina

Strumenti discussione

Ricerca discussione

Visualizza

Problema con menù a tendina

Permessi di invio