Problème menu vertical css

Bonjour à tous !
J'ai encore des problèmes avec mon menu vertical !
Voici mon code CSS tout d'abord pour le menu :

nav {
	background-color:black;
	color:white;
	position:fixed;
	width:28%;
	vertical-align: top;
	z-index:100;
}
nav li:hover ul{
	    display: block ;
	    width:150%;
	    position:relative;
	    left:100%;	    
	    top:-150px;
	    padding:5px;
	    z-index: 100; 
	    background-color: grey;
	    color:black;
    	border:2px solid black;
}

ul {list-style:none;
z-index:100;}

nav li {
	padding:28%;
	z-index:100;
}

En fait, j'ai deux problèmes, le premier, c'est que quand je passe sur le menu principal pour faire apparaître le sous-menu, cela me décale les éléments du menu vers le bas et en cache donc certains (les plus bas).
Aussi, je trouve mes sous-menus trop gros (en hauteur principalement) et je n'arrive pas à diminuer la taille, j'ai l'impression que par défaut cela utilise le même interlignage que ce que j'ai mis pour le menu principal. Du coup ça fait que quand je passe sur le dernier élément de mon menu principal, le sous-menu est coupé par le bas de la page...

Merci d'avance pour votre aide !
Je commence tout juste à coder et c'est une vraie galère ahah

Et voici : https://codepen.io/marie-racoillet/full/zYozVpL
(c'est la première fois que je l'utilise, j'espère que ça marche)