- 12 Novembre 2014
- 38
- 0
- Miglior risposta
- 0
salve il menu' a tendina risolto precedentemente tutto ok.
il problema quando vado a cliccare sul menu a tendina (prestazioni) non mantine aperto non mi da la possibilita' di cliccare la voce dove andare e tra un voce e l'altra c'e' molto spazio. vi metto il css creato per il menu' a tendina
grazie Annachiara.
.menu li{
display: block;
float: left;
width: 270px;
height: 50px;
line-height:50px;
text-align: center;
margin-top:70px;
color: #2C3E50;
border-right: 1px solid #2C3E50;
background: -webkit-linear-gradient(top, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
background: -moz-linear-gradient(top, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
background: -o-linear-gradient(top, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
background: -ms-linear-gradient(top, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
}
.menu li:hover{
cursor: pointer;
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%, #e5e5e5 100%);
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e5e5e5 100%);
background: -o-radial-gradient(center, ellipse cover, #ffffff 0%, #e5e5e5 100%);
background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%, #e5e5e5 100%);
color: slateGrey;
}
.primo{
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.secondo{
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.terzo{
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.sub-menu{
visibility: hidden;
}
.menu li:hover .sub-menu{
visibility: visible;
}
.sub-menu li{
border-top: 1px dotted #2C3E50;
}
.sub-menu li:hover{
width: 145px;
background: -webkit-radial-gradient(center, ellipse cover, #f7fbfc 10%, #add9e4 100%);
background: -moz-radial-gradient(center, ellipse cover, #f7fbfc 10%, #add9e4 100%);
background: -o-radial-gradient(center, ellipse cover, #f7fbfc 10%, #add9e4 100%);
background: -ms-radial-gradient(center, ellipse cover, #f7fbfc 10%, #add9e4 100%);
transition: all 0.1s ease 0s;
-webkit-transition: all 0.1s ease 0s;
-moz-transition: all 0.1s ease 0s;
-o-transition: all 0.1s ease 0s;
-ms-transition: all 0.1s ease 0s;
}
.ultimo-sub{
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#menu li {display:inline;}
il problema quando vado a cliccare sul menu a tendina (prestazioni) non mantine aperto non mi da la possibilita' di cliccare la voce dove andare e tra un voce e l'altra c'e' molto spazio. vi metto il css creato per il menu' a tendina
grazie Annachiara.
.menu li{
display: block;
float: left;
width: 270px;
height: 50px;
line-height:50px;
text-align: center;
margin-top:70px;
color: #2C3E50;
border-right: 1px solid #2C3E50;
background: -webkit-linear-gradient(top, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
background: -moz-linear-gradient(top, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
background: -o-linear-gradient(top, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
background: -ms-linear-gradient(top, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
}
.menu li:hover{
cursor: pointer;
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%, #e5e5e5 100%);
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e5e5e5 100%);
background: -o-radial-gradient(center, ellipse cover, #ffffff 0%, #e5e5e5 100%);
background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%, #e5e5e5 100%);
color: slateGrey;
}
.primo{
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.secondo{
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.terzo{
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.sub-menu{
visibility: hidden;
}
.menu li:hover .sub-menu{
visibility: visible;
}
.sub-menu li{
border-top: 1px dotted #2C3E50;
}
.sub-menu li:hover{
width: 145px;
background: -webkit-radial-gradient(center, ellipse cover, #f7fbfc 10%, #add9e4 100%);
background: -moz-radial-gradient(center, ellipse cover, #f7fbfc 10%, #add9e4 100%);
background: -o-radial-gradient(center, ellipse cover, #f7fbfc 10%, #add9e4 100%);
background: -ms-radial-gradient(center, ellipse cover, #f7fbfc 10%, #add9e4 100%);
transition: all 0.1s ease 0s;
-webkit-transition: all 0.1s ease 0s;
-moz-transition: all 0.1s ease 0s;
-o-transition: all 0.1s ease 0s;
-ms-transition: all 0.1s ease 0s;
}
.ultimo-sub{
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#menu li {display:inline;}