Sir Xiradorn ha scritto:Cambia il position e metti in
.xirmenuappear
al posto di
questo
Per la transizione usa invece
Per ora famo ste due
Mi sono perso qualche passaggio
,perché inserendo le modifiche non succede nulla ,facciamo un passo indietro....
Non ho capito bene dove inserire questo codice
Codice: Seleziona tutto
.xirmenuappear {
width: 100px;
display: block;
position: absolute;
padding: 10px;
background: rgb(77, 78, 70);
transform: rotate(90deg);
top: 75px;
border-radius: 5px;
color: rgb(255, 170, 0);
font-weight: bold;
text-decoration: none;
text-shadow: 2px 2px 0px black;
left: -44px;
}
ul#css3menu1 {
left: -105px;
}
.xirmenuappear:hover {
left: 60px !important;
position: absolute !important;
z-index: 999;
}
.xirmenuappear:hover + #css3menu1, #css3menu1:hover {
left: 0;
}
Perché io l'ho inserito in cima nel file "style.css"
Codice: Seleziona tutto
ul#css3menu1> li{width: 99px;height: auto; transition: 0.3s linear;-moz-transition: 0.3s linear;-webkit-transition: 0.3s linear;-o-transition: 0.3s linear;}
#css3menu1,ul#css3menu1> ul:hover {width: 140px; height: 400px;}
ul#css3menu1{ width: 30px; height: auto; overflow: hidden;
transition: 0.3s linear; -moz-transition: 0.3s linear; -webkit-transition: 0.3s linear; -o-transition: 0.3s linear}
#css3menu1,ul#css3menu1:hover {width: 620px; height: 600px;}
ul#css3menu1,ul#css3menu1 ul{
margin:0;list-style:none;padding:0;background-color:#000;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAK8CAYAAAAu3tULAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA0jIR3UfIQAAACiSURBVEjH7ZbNCgMhDIS//LxB3/8Ve+iph6XpqRaDC4V1S5C9DImBMZlREeCmAA2kT4+AzaOSQg1JNXFQQEv6ZsuxTKTyau6XG2v2Jakpu695SRY93na92f8bUEuKrZU+NhYRDwW2Bs9vREQ4n42sgbbI+zUfFHxQTWkiTan0kSrwOuNtr/mhOgXurUkZ6Kw92I+++Z6XvkeVzlXq5bJ7GrwBxcIVRiNdtAgAAAAASUVORK5CYII=");background-repeat:repeat;border-width:0px;border-style:solid;border-color:#162436;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
ul#css3menu1 ul{
display:none;position:absolute;left:100%;top:0;-moz-box-shadow:0.7px 0.7px 1px #3E3E3E;-webkit-box-shadow:0.7px 0.7px 1px #3E3E3E;box-shadow:0.7px 0.7px 1px #3E3E3E;background-color:#000000;background-image:none;border-width:1px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border-style:solid;border-color:#162436;padding:0 9px 9px;}
ul#css3menu1 li:hover>*{
display:block;}
ul#css3menu1 li{
position:relative;display:block;white-space:nowrap;font-size:0;}
ul#css3menu1 li:hover{
z-index:1;}
ul#css3menu1 ul ul{
position:absolute;left:100%;top:0;}
ul#css3menu1{
font-size:0;z-index:999;position:fixed;display:block;float:left;padding:0 1px 1px;}
ul#css3menu1>li{
margin:1px 0 0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;}
ul#css3menu1 a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 12px Arial;color:#ffff7f;cursor:default;padding:10px;background-color:#000000;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAK8CAYAAAAu3tULAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA0jIR3UfIQAAACiSURBVEjH7ZbNCgMhDIS//LxB3/8Ve+iph6XpqRaDC4V1S5C9DImBMZlREeCmAA2kT4+AzaOSQg1JNXFQQEv6ZsuxTKTyau6XG2v2Jakpu695SRY93na92f8bUEuKrZU+NhYRDwW2Bs9vREQ4n42sgbbI+zUfFHxQTWkiTan0kSrwOuNtr/mhOgXurUkZ6Kw92I+++Z6XvkeVzlXq5bJ7GrwBxcIVRiNdtAgAAAAASUVORK5CYII=");background-repeat:repeat;background-position:0 200px;border-width:0px;border-style:none;border-color:;}
ul#css3menu1 ul li{
float:none;margin:9px 0 0;}
ul#css3menu1 ul a{
text-align:left;padding:8px 0 0 0;background-color:#000000;background-image:none;border-width:1px 0 0 0;border-style:solid;border-color:#293344;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;font:bold 13px Arial;color:#ffff7f;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
background-color:#ffff7f;border-style:none;color:#000000;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAK8CAYAAAAu3tULAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA0jIR3UfIQAAACiSURBVEjH7ZbNCgMhDIS//LxB3/8Ve+iph6XpqRaDC4V1S5C9DImBMZlREeCmAA2kT4+AzaOSQg1JNXFQQEv6ZsuxTKTyau6XG2v2Jakpu695SRY93na92f8bUEuKrZU+NhYRDwW2Bs9vREQ4n42sgbbI+zUfFHxQTWkiTan0kSrwOuNtr/mhOgXurUkZ6Kw92I+++Z6XvkeVzlXq5bJ7GrwBxcIVRiNdtAgAAAAASUVORK5CYII=");background-position:0 100px;text-decoration:none;}
ul#css3menu1 span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul span{
background-image:url("data:image/gif;base64,R0lGODlh6AMMAMIFAL6+vtra2ry8vL29vcjIyP///wAAAP///yH5BAEAAAcALAAAAADoAwwAAAPEeLrc/jDKSau9OOvNu/9gKI5kaZ5oqq5s675wLM+0ZRhBre987//AoHBILBqPyKTyE7g9bgPCckqtWq/YrHbL7Xq/FcLAybgJpOC0es1uu9/wuBxOEJAVhuh8z+/7/4CBgoNUYgYLBgBohIyNjo+QkZKTWwQAhwYCdpScnZ6foKGinJmbiYujqaqrrK2urzGWh3h6sLa3uLm6u5SGZZmovMLDxMXGx0F1d3h5wcjP0NHS09QHhrMNNznV3N3e3+CTTdgHCQA7");padding-right:15px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
background-color:#ffff7f;background-image:none;border-style:solid;border-color:#293344;color:#000000;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;-webkit-border-radius:4px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;text-shadow:#000000 0px -1px 1px;}
ul#css3menu1 li.topfirst:hover>a,ul#css3menu1 li.topfirst a.pressed{
text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu1 li.topmenu>a{
-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;text-shadow:#000000 0px -1px 1px;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu a.pressed{
text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu1 li.toplast>a{
border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;text-shadow:#000000 0px -1px 1px;}
ul#css3menu1 li.toplast:hover>a,ul#css3menu1 li.toplast a.pressed{
text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu1 _>li>a{
padding:0;}
ul#css3menu1 li.subfirst>a{
border-width:0;border-style:none;padding:0;}
ul#css3menu1 li.subfirst:hover>a,ul#css3menu1 li.subfirst a.pressed{
border-style:none;}
Questo "style.css" è un file generato sempre dal famoso programmino ,file Che seguendo le istruzioni di installazione ,ho poi provveduto a spostare tramite ftp dentro il prosilver