Ciao a tutti!
Ho creato un menù in verticale, dove all'hover della voce principale, esce a destra una tendina di sottomenù.
Il problema sussiste dal momento in cui, per far in modo che tutte le voci del menù principale possano essere tutte visibili anche sopra ad uno schermo più piccolo (non cellulare), ho impostato overflow-y: auto, così che quel box possa essere scrollabile; purtroppo però facendo così, la tendina del sottomenù non esce più dal box e non è molto visibile.
Come posso fare per far sì che la tendina esca dal box e sia ben visibile?
Ho creato un menù in verticale, dove all'hover della voce principale, esce a destra una tendina di sottomenù.
Il problema sussiste dal momento in cui, per far in modo che tutte le voci del menù principale possano essere tutte visibili anche sopra ad uno schermo più piccolo (non cellulare), ho impostato overflow-y: auto, così che quel box possa essere scrollabile; purtroppo però facendo così, la tendina del sottomenù non esce più dal box e non è molto visibile.
Come posso fare per far sì che la tendina esca dal box e sia ben visibile?
HTML:
<div class="box_verticale">
<ul class="involucro_menu">
<li class="involucro_voce_menu mb10 mr3">
<button class="button_icone_vert voce_menu">
<img height="30px">
</button>
<ul class="involucro_sottomenu involucro_sottomenu">
<li class="involucro_voce_sottomenu">
<a href="" class="voce_sottomenu">Ciao</a>
<a href="" class="voce_sottomenu">Miao</a>
<a href="" class="voce_sottomenu">Bau</a>
<a href="" class="voce_sottomenu">Slurp</a>
</li>
</ul>
</li>
<li class="involucro_voce_menu mb10 ml3">
<button class="button_icone_vert voce_menu">
<img height="30px">
</button>
<ul class="involucro_sottomenu">
<li class="involucro_voce_sottomenu">
<a href="" class="voce_sottomenu">Ciao</a>
<a href="" class="voce_sottomenu">Miao</a>
<a href="" class="voce_sottomenu">Bau</a>
<a href="" class="voce_sottomenu">Slurp</a>
</li>
</ul>
</li>
<br>
<li class="involucro_voce_menu mb10 mr3">
<button class="button_icone_vert voce_menu">
<img height="30px">
</button>
<ul class="involucro_sottomenu">
<li class="involucro_voce_sottomenu">
<a href="" class="voce_sottomenu">Ciao</a>
<a href="" class="voce_sottomenu">Miao</a>
<a href="" class="voce_sottomenu">Bau</a>
<a href="" class="voce_sottomenu">Slurp</a>
</li>
</ul>
</li>
<li class="involucro_voce_menu mb10 ml3">
<button class="button_icone_vert voce_menu">
<img height="30px">
</button>
<ul class="involucro_sottomenu">
<li class="involucro_voce_sottomenu">
<a href="" class="voce_sottomenu">Ciao</a>
<a href="" class="voce_sottomenu">Miao</a>
<a href="" class="voce_sottomenu">Bau</a>
<a href="" class="voce_sottomenu">Slurp</a>
</li>
</ul>
</li>
<br>
<li class="involucro_voce_menu mb10 mr3">
<button class="button_icone_vert voce_menu">
<img height="30px">
</button>
<ul class="involucro_sottomenu">
<li class="involucro_voce_sottomenu">
<a href="" class="voce_sottomenu">Ciao</a>
<a href="" class="voce_sottomenu">Miao</a>
<a href="" class="voce_sottomenu">Bau</a>
<a href="" class="voce_sottomenu">Slurp</a>
</li>
</ul>
</li>
<li class="involucro_voce_menu mb10 ml3">
<button class="button_icone_vert voce_menu">
<img height="30px">
</button>
<ul class="involucro_sottomenu">
<li class="involucro_voce_sottomenu">
<a href="" class="voce_sottomenu">Ciao</a>
<a href="" class="voce_sottomenu">Miao</a>
<a href="" class="voce_sottomenu">Bau</a>
<a href="" class="voce_sottomenu">Slurp</a>
</li>
</ul>
</li>
</ul>
</div>
CSS:
*, *:after, *:before {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
overflow: hidden;
}
.box_verticale {
display: inline-block;
width: 200px;
min-width: 200px;
height: 100%;
text-align: center;
overflow: visible;
background-color: #9ebd41;
}
.involucro_menu {
display: inline-block;
list-style: none;
text-align: center;
float: none;
padding: 0;
width: 100%;
height: 100%;
position:relative;
overflow-y: auto;
}
.involucro_voce_menu {
display:inline-block;
position:relative;
float: none;
}
.voce_sottomenu {
display:block;
text-decoration:none;
text-decoration: none;
color: white;
white-space: nowrap;
padding:7px;
z-index: 9999;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.3s;
float: none;
}
.voce_sottomenu:hover {
border-radius: 15px;
background-color: #1c8ec7;
float: none;
z-index: 9999;
}
.involucro_sottomenu {
list-style: none;
background-color: #555555;
border-radius: 15px;
width: 130px;
float: none;
overflow: visible;
padding: 0;
z-index: 9999;
position:absolute;
top:0;
left: 100%;
opacity: 0;
visibility: hidden;
}
ul.involucro_menu li:hover ul{
float: none;
opacity: 1;
visibility: visible;
}
ul.involucro_menu li:hover > button {
background-color: transparent;
color:white;
box-shadow: none;
}
.button_icone_vert {
display: inline-block;
text-align: center;
font-size: x-small;
text-decoration: none;
border: none;
border-radius: 15px;
cursor: pointer;
background-color: white;
color: #555555;
height: 53px;
width: 65px;
box-shadow: 2px 2px 8px 0 #555555;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
.button_icone_vert:hover {
background-color: #9ebd41;
color: white;
}
.mb10 {
margin-bottom: 10px;
}
.ml3 {
margin-left: 3px;
}
.mr3 {
margin-right: 3px;
}