Jump to content

Scroll dans un sous-menu


sashouu
 Share

Recommended Posts

Bonjour j'aimerai que quelqu'un me dise comment peux t'on scroll dans un sous-menu, car j'ai beaucoup de liens à mettre.

 

html:

<ul id="liste">
 
            <li id="items">
                <p id="txt-liste">Plus...</p>
                <ul id="sous-liste">
                    <li id="titre-sous-liste"><a href="https://fr.wikipedia.org/wiki/Tableau_p%C3%A9riodique_des_%C3%A9l%C3%A9ments">Le tableau périodique</a></li>
 
                    <li class="liste-items"><a href="https://fr.wikipedia.org/wiki/M%C3%A9tal_alcalin">Les métaux alcalins</a></li>
                    <li class="liste-items"><a href="https://fr.wikipedia.org/wiki/M%C3%A9tal_alcalino-terreux">Les métaux alcalino-terreux</a></li>
                    <li class="liste-items"><a href="https://fr.wikipedia.org/wiki/Lanthanide">Les lanthanides</a></li>
                    <li class="liste-items"><a href="https://fr.wikipedia.org/wiki/Actinide">Les actinides</a></li>
                    <li class="liste-items"><a href="https://fr.wikipedia.org/wiki/M%C3%A9tal_de_transition">Les métaux de transition</a></li>
                    <li class="liste-items"><a href="https://fr.wikipedia.org/wiki/M%C3%A9tal_pauvre">Les métaux pauvres</a></li>
                    <li class="liste-items"><a href="https://fr.wikipedia.org/wiki/M%C3%A9tallo%C3%AFde">Les métalloïdes</a></li>
                    <li class="liste-items"><a href="https://fr.wikipedia.org/wiki/Non-m%C3%A9tal">Les non-métaux</a></li>
                    <li class="liste-items"><a href="https://fr.wikipedia.org/wiki/Halog%C3%A8ne">Les halogènes</a></li>
                    <li class="liste-items"><a href="https://fr.wikipedia.org/wiki/Gaz_noble">Les gaz nobles</a></li>
 
                    <li class="liste-items"><a href="https://fr.wikipedia.org/wiki/M%C3%A9tallo%C3%AFde">Les inconnus</a></li>
                    <li class="liste-items"><a href="https://fr.wikipedia.org/wiki/Superactinide">Les superactinides</a></li>
                </ul>
            </li>
 
          </ul>

 

css: 

*::before::after {
  box-sizingborder-box;
  padding0;
  margin0;
}
#items {
  displayflex;
  justify-contentcenter;
  align-itemscenter;
  cursorpointer;
}
#items:nth-child(1) {
  height60px;
}
#sous-liste a {
  text-decorationnone;
  color#f1f1f1;
}
 
/* sous liste */
#sous-liste {
  positionfixed;
  height100vh;
  width200px;
  top60px;
  right0;
  backgroundrgb(37,37,37);
  list-style-typenone;
  padding20px;
  border-left10px solid #222;
  border-right10px solid #222;
  displaynone;
}
#titre-sous-liste {
  text-aligncenter;
  font-size20px;
  padding-bottom0;
  font-family'Poppins'sans-serif;
}
.liste-items {
  font-size13px;
  margin0 0;
  padding5px;
  text-aligncenter;
  font-family'Poppins'sans-serif;
}    
#items:hover > ul {
  displayblock;
}

 

Mon site :

image.png.060d6b900a5b4106fe063f39d620843b.png

 

Merci beaucoup d'avance !

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...