css dropdowns vertical

Greuth · 15.02.2021

Hallo,

wer kann mir hierbei weiter helfen und zwar möchte ich gern die vierte Spalte angezeigt bekommen, die wird momentan nicht sichtbar weil in der dritte Spalte einen Overflow Befehl drin ist.
(Overflow deswegen, weil in der dritten Spalte später mehr als 10 Einträge kommen werden). Kann man bei der dritten Spalte auch den vertikalen Scroll Balken unterbinden?

Das Ergebnis sollte so aussehen, wenn ich 3.1.1 auswähle:

Der Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">

*{padding:0;margin:0;}
body{font:16px/1 sans-serif}

/*VERTICAL MENU*/
nav.vertical{
position:relative;
width:100px;

}

/* ALL UL */
nav.vertical ul{
list-style: none;

}
/* ALL LI */
nav.vertical li{
position:relative;

}
/* ALL A */
nav.vertical a{
display:block;
color:#eee;
text-decoration:none;
padding:10px 15px;
background:#667;
transition:0.2s;

}
/* ALL A HOVER */
nav.vertical li:hover > a{
background:#778;

}

/* INNER UL HIDE */
nav.vertical ul ul{
position:absolute;
left:0%;
top:0;
width:100%;
visibility:hidden;
opacity:0;
transition: transform 0.2s;
transform: translateX(50px);

}
/* INNER UL SHOW */
nav.vertical li:hover > ul{
left:100%;
visibility:visible;
opacity:1;
transform: translateX(0px);

}

nav.vertical ul ul ul {
max-height: 80px; overflow: auto;
}

</style>
</head>
<body>

<nav class="vertical">
<ul>
<li><a href="#">1 </a></li>

<li><a href="#">2 » </a>
<ul>
<li><a href="#">2.1 »</a>
<ul>
<li><a href="#" >2.1.1</a></li>
<li><a href="#" >2.1.2</a></li>
</ul>
</li>

<li><a href="#">2.2 »</a>
<ul>
<li><a href="#" >2.2.1</a></li>
<li><a href="#" >2.2.2</a></li>
</ul>
</li>

<li><a href="#">2.3 »</a>
<ul>
<li><a href="#" >2.3.1</a></li>
<li><a href="#" >2.3.2</a></li>

</ul>
</li>

</ul>
</li>

<li><a href="#">3 » </a>
<ul>
<li><a href="#">3.1 »</a>
<ul>
<li><a href="#" >3.1. 1 » </a><ul>
<li><a href="#" >3.1.1.1</a></li>
<li><a href="#" >3.1.1.2</a></li>
</ul>
</li>
<li><a href="#" >3.1.2 » </a>
<ul>
<li><a href="#" >3.1.2.1</a></li>
<li><a href="#" >3.1.2.2</a></li>
</ul>
</li>
<li><a href="#" >3.1.3 » </a>
<ul>
<li><a href="#" >3.1.3.1</a></li>
<li><a href="#" >3.1.3.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">3.2</a></li>
<li><a href="#">3.3</a></li>
</ul>
</li>

<li><a href="#">4 » </a>
<ul>
<li><a href="#">4.1</a></li>
<li><a href="#">4.2</a></li>
</ul>
</li>
<li><a href="#">5</a>
</ul>
</nav>
</Body>

Ist das überhaupt machbar?

css dropdowns vertical

Greuth

New member

Anhänge

css dropdowns vertical