Ajout d'un sous menu dans mon menu

Bonjour,

Je cherche à ajouter un sous menu au bouton "Programmes" de mon menu.

Voici le code html :

<div class="container-sm">
	<div class="row">
		<div class="col">
			<img src="images/banniere.jpg" width=100% alt="Boischaut-Sud Radio"/>
		</div>
	</div>
	<div class="row" style="border:0px;margin:0px;padding:0px;text-align: center;" >
		<div class="c x">
			<div class="result-wrapper x">
	  			<div class="result">
					<nav class="skew-menu">
						<ul>
							<li><a href="#">Accueil</a></li>
							<li><a href="#">C'est dans le Boischaut-Sud</a></li>
							<li><a href="#">Programmes</a></li>
							<li><a href="#">Contact</a></li>
							<li><a href="#">Liens amis</a></li>
						</ul>
					</nav>

				</div>
			</div>
		</div>
		<div class="col" style="border:0px;margin:0px;padding:0px" ></div>
	</div>
</div>

et le CSS qui va avec :

.skew-menu{
  text-align: center;
  background: #ff6000;
  border-radius: 100% / 50%
}

.skew-menu ul {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: skew(-25deg);
}

.skew-menu ul li {
  background: #fff;
  float: left;
  border-right: 1px solid #eee;
  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  text-transform: uppercase;
  color: #555;
  font-weight: bolder;
  transition: all 0.3s linear;
}
  
.skew-menu ul li:first-child {
	border-radius: 7px 0 0 7px;
}
  
.skew-menu ul li:last-child {
	border-right: none;
	border-radius: 0 7px 7px 0;
}
  
.skew-menu ul li:hover {
    background: #eee;
    color: #000;
}
  
.skew-menu ul li a {
    display: block;
    padding: 1em 2em;
    color: inherit;
    text-decoration: none;
    transform: skew(25deg);
}

Je galère depuis hier, je suis sûr qu'ici, il y aura sûrement quelqu'un qui va pouvoir me tirer d'affaire.
Merci d'avance pour votre aide.

Bonjour,

On ne voit pas de sous-menu dans ton code.

Pour en ajouter un , la methode classique est l'imbrication de liste ex:

<ul>
              <li><a href="#">Accueil</a></li>
              <li><a href="#">C'est dans le Boischaut-Sud</a></li>
              <li><a href="#">Programmes</a>
                <ul><!-- liste de second niveau - sous-menu -->
                  <li><a href="#">Accueil</a></li>
                  <li><a href="#">C'est dans le Boischaut-Sud</a></li>
                  <li><a href="#">Programmes</a></li>
                  <li><a href="#">Contact</a></li>
                  <li><a href="#">Liens amis</a></li>
                </ul>
              </li>
              <li><a href="#">Contact</a></li>
              <li><a href="#">Liens amis</a></li>
            </ul>

Puis classiquement du positionnement en absolu et caché tant que l'item de liste ou il se trouve n'est pas survolé.
possible exemple en gardant l'idée du skew() :

.skew-menu ul ul {
  display:grid;
  position:absolute;
  visibility:hidden;
}
.skew-menu ul  li:hover ul  { 
  visibility:visible
}
/* skew it too */
.skew-menu ul ul {
  transform: skew(25deg);
}
.skew-menu ul ul li  {
  transform: skew(-25deg);
}
.skew-menu ul ul li a {
    transform: skew(25deg);
}

Visuel en ligne: https://jsfiddle.net/ynf08wcz/

cdt

Un grand merci, là, tu m'a juste évité des heures de tâtonnement.
Vraiment sympa