Petit soucis avec menu deroulant

Bonjour,

Je suis en train de crée une administration pour mon site web, dedans j'ai mis un menu déroulant que j'ai pris sur un site, après l'avoir modifier je m'aperçoi qu'il y a un petit problème. Quand on ouvre le sous-menu en cliquant sur le 'titre' il y a que la 'partie droite' du sous-menu qu'y s'affiche !

Vous pouvez allez voir le soucis ici : http://adow-city.fr/admin1/header.php

Le JavaScript:

( function( $ ) {
$( document ).ready(function() {
$('#cssmenu li.has-sub>a').on('click', function(){
		$(this).removeAttr('href');
		var element = $(this).parent('li');
		if (element.hasClass('open')) {
			element.removeClass('open');
			element.find('li').removeClass('open');
			element.find('ul').slideUp();
		}
		else {
			element.addClass('open');
			element.children('ul').slideDown();
			element.siblings('li').children('ul').slideUp();
			element.siblings('li').removeClass('open');
			element.siblings('li').find('li').removeClass('open');
			element.siblings('li').find('ul').slideUp();
		}
	});

	$('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');

	(function getColor() {
		var r, g, b;
		var textColor = $('#cssmenu').css('color');
		textColor = textColor.slice(4);
		r = textColor.slice(0, textColor.indexOf(','));
		textColor = textColor.slice(textColor.indexOf(' ') + 1);
		g = textColor.slice(0, textColor.indexOf(','));
		textColor = textColor.slice(textColor.indexOf(' ') + 1);
		b = textColor.slice(0, textColor.indexOf(')'));
		var l = rgbToHsl(r, g, b);
		if (l > 0.7) {
			$('#cssmenu>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
			$('#cssmenu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
		}
		else
		{
			$('#cssmenu>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
			$('#cssmenu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
		}
	})();

	function rgbToHsl(r, g, b) {
	    r /= 255, g /= 255, b /= 255;
	    var max = Math.max(r, g, b), min = Math.min(r, g, b);
	    var h, s, l = (max + min) / 2;

	    if(max == min){
	        h = s = 0;
	    }
	    else {
	        var d = max - min;
	        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
	        switch(max){
	            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
	            case g: h = (b - r) / d + 2; break;
	            case b: h = (r - g) / d + 4; break;
	        }
	        h /= 6;
	    }
	    return l;
	}
});
} )( jQuery );

Besoin du css ? Je le mes car je ne c'est pas :

#cssmenu,                              /* GENERAL */
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0%;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
}
nav                                     /* GENERAL */
{
  background-color: #1a2942;
  width: 335px;
  height: 100%;
  margin-top: -10px;
  margin-left: -10px;
}
#cssmenu {                                 /* GENERAL */
  width: 300px;
  height: 700px;
  font-family: Helvetica, Arial, sans-serif;
  color: #b4b6bd;
  padding: 30px;
  margin-top: -20px;
}
#cssmenu ul ul {                              /* POUR GARDEZ FERMEZ LES SOUS MENUES */
  display: none;
}
#cssmenu > ul > li > a {                     /* LES LIENS */
  padding: 15px;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  color: #b4b6bd;
}
#cssmenu > ul > li > a:hover
{
  color: white;
  background-color: #1a2942;
}
#cssmenu > ul > li > a:after
{
  color: #337ab7;
  background-color: #1a2942;
}
#cssmenu > ul > li.open > a {
}
#cssmenu > ul > li:last-child > a,
#cssmenu > ul > li.last > a {
}
.holder {
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: 0;
}
.holder::after,
.holder::before {
  display: block;
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  right: 20px;
  z-index: 10;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.holder::after {
  top: 17px;
  border-top: 2px solid #b4b6bd;
  border-left: 2px solid #b4b6bd;
}
.holder::before {
  top: 18px;
}
#cssmenu ul ul li a {
  cursor: pointer;
  margin-left: -55px;
  padding: 10px;
  z-index: 1;
  text-decoration: none;
  font-size: 13px;
  color: #b4b6bd;
  background-color: #010822;
  width: 255px;
  padding-left: 70px;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
  background: #424852;
  color: #b4b6bd;
}
.titreacadm
{
  color: white;
  font-size: 2.5em;
  display: flex;
  justify-content: center;
  margin-top: 2px;
}
.imgaccueil
{
  background-image: url('https://img4.hostingpics.net/pics/725254Accueil.png');
  height: 20px; 
  width: 20px; 
  margin-bottom: -100px;
  padding-top: 10px;
  position: absolute;
  z-index: 10;
}
.imgadministration
{
  height: 20px; 
  width: 20px; 
  margin-bottom: -100px;
  padding-top: 12px;
  position: absolute;
  z-index: 10;
}
.imgresponsabilite
{
  height: 30px; 
  width: 30px; 
  margin-bottom: -100px;
  padding-top: 7px;
  padding-right: 6px;
  padding-left: -4px;
  margin-left: -4px;
  position: absolute;
  z-index: 10;
}
.imgjournaliste
{
  height: 20px; 
  width: 20px; 
  margin-bottom: -100px;
  padding-top: 11px;
  position: absolute;
  z-index: 10;
}
.imgmoderation
{
  height: 20px; 
  width: 20px; 
  margin-bottom: -100px;
  padding-top: 12px;
  position: absolute;
  z-index: 10;
}
.imgwebmail
{
  height: 20px; 
  width: 20px; 
  margin-bottom: -100px;
  padding-top: 12px;
  position: absolute;
  z-index: 10;
}

Le html ? Allez soyons fou:

<nav>
         <h2 class="titreacadm">Adow-City</h2>
         <div id='cssmenu'>
             <ul>
                <img src="https://img4.hostingpics.net/pics/615356Accueil.png" class="imgaccueil">
                <li style="margin-left: 25px;"><a href='#'><span>Accueil</span></a></li>
                
                <img src="https://img15.hostingpics.net/pics/976731Direction.png" class="imgadministration">
                <li class='active has-sub' style="margin-left: 25px;"><a href='#'><span>Service Administration</span></a>
                   <ul>
                      <li><a href='#'><span>Product 1</span></a></li>
                      <li><a href='#'><span>Product 1</span></a></li>
                   </ul>
                </li>
                
                <img src="https://img15.hostingpics.net/pics/811306Responsabilite.png" class="imgresponsabilite">
                <li class='active has-sub' style="margin-left: 25px;"><a href='#'><span>Service Responsabilité</span></a>
                   <ul>
                      <li><a href='#'><span>Les logs</span></a></li>
                      <li><a href='#'><span>Rank un utilisateur</span></a></li>
                      <li><a href='#'><span>Derank un utilisateur</span></a></li>
                      <li><a href='#'><span>Modifier information du site</span></a></li>
                      <li><a href='#'><span>Modifier information de l'adm</span></a></li>
                   </ul>
                </li>
                
                <img src="https://img15.hostingpics.net/pics/272752Journaliste.png" class="imgjournaliste">
                <li class='active has-sub' style="margin-left: 25px;"><a href='#'><span>Service Journaliste</span></a>
                   <ul>
                      <li><a href='#'><span>Ecrire un article</span></a></li>
                      <li><a href='#'><span>Supprimer un article</span></a></li>
                      <li><a href='#'><span>Valider un article</span></a></li>
                      <li><a href='#'><span>Gerer les articles</span></a></li>
                   </ul>
                </li>
                
                <li class='active has-sub' style="margin-left: 25px;"><a href='te'><span>Service Animation</span></a>
                   <ul>
                      <li><a href='#'><span>Ajouter un point</span></a></li>
                      <li><a href='#'><span>Retirer un point</span></a></li>
                      <li><a href='#'><span>Palmarès des points</span></a></li>
                      <li><a href='#'><span>Gerer les points</span></a></li>
                      <li><a href='#'><span>Dernières animations</span></a></li>
                      <li><a href='#'><span>Derniers evenements</span></a></li>
                   </ul>
                </li>
                
                <img src="https://img15.hostingpics.net/pics/162307Moderation2.png" class="imgmoderation">
                <li class='active has-sub' style="margin-left: 25px;"><a href='#'><span>Service Modération</span></a>
                   <ul>
                      <li><a href='#'><span>Bannir un utilisateur</span></a></li>
                      <li><a href='#'><span>SUPER BAN</span></a></li>
                      <li><a href='#'><span>Débannir un utilisateur</span></a></li>
                      <li><a href='#'><span>Liste des utilisateurs</span></a></li>
                      <li><a href='#'><span>Modifier le look a un utilisateur</span></a></li>
                      <li><a href='#'><span>Modififier le pseudo a un utilisateur</span></a></li>
                      <li><a href='#'><span>Supprimer une dedicaces</span></a></li>
                      <li><a href='#'><span>Listes des decicaces</span></a></li>
                   </ul>
                </li>

                <img src="https://img15.hostingpics.net/pics/607729Webmail.png" class="imgwebmail">
                <li style="margin-left: 25px;"><a href='#'><span>WebMail Adow-City</span></a></li>
             </ul>
         </div>
     </nav>

Merci à tous !! En attente de réponses !

En ouvrant le sous-menu une partie s'affiche pas toute suite

Petit soucis avec menu deroulant

Supprimer

Modérer

Signaler le message aux modérateurs