css dropdowns vertical

Diskutiere css dropdowns vertical im CSS Forum im Bereich Programmierung; 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...
G

Greuth

New member
Dabei seit
12.02.2021
Beiträge
3
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?

Navi2.png

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

Navi1.png


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 &raquo; </a>
<ul>
<li><a href="#">2.1 &raquo;</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 &raquo;</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 &raquo;</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 &raquo; </a>
<ul>
<li><a href="#">3.1 &raquo;</a>
<ul>
<li><a href="#" >3.1. 1 &raquo; </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 &raquo; </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 &raquo; </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 &raquo; </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?
 

Anhänge

  • Navi.png
    Navi.png
    3,2 KB · Aufrufe: 0
Zuletzt bearbeitet:
Thema:

css dropdowns vertical

Oben