Aligner un "sous menu" (ou menu déroulant)

Aligner le menu à gauche

Sujet résolu

22 septembre 2018 à 13:31:03

Bonjour à tous,

Je suis actuellement en train de retravailler le menu de mon site web en essayant de le créer totalement en HTML et CSS (mon précédent menu était en Bootstrap et pas facilement manipulable). Malheureusement en voulant le faire uniquement en HTML et CSS comme je suis en train de le faire, je me heurte à quelques difficultés.

La principale difficulté à laquelle je me heurte est faire un sous-menu (ou menu déroulant, je ne sais pas exactement comment l'appelé) et de styliser ce sous menu (avec le CSS).

Actuellement, voici les lignes de code de mon menu (HTML et CSS) :

Code HTML :

<!DOCTYPE html>
<html>
<head>
    <title>Menu reponsive déroulant HTML / CSS</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style_menu.css">
    </head>
<body>
    <nav>
        <ul class="menu">
            <li class="accueil"><a href="#">Accueil</a></li>
            <li class="categories"><a href="#">Catégories</a>
                <ul class="submenu">
                    <li class="automobile"><a href="#">Automobile</a></li>
                    <li class="evenements"><a href="#">Evenements</a></li>
                    <li class="musique"><a href="#">Musique</a></li>
                </ul>
            </li>
            <li class="question"><a href="#">F.A.Q</a></li>
            <li class="compte"><a href="#">Mon compte</a></li>
            <li class="contact"><a href="#">Contact</a></li>
        </ul>
    </nav>
    </body>
</html>

Et mon code CSS :

body{
    font-family: Gill Sans, sans-serif;
    padding: 0px; 
    margin: 0px;
}
nav li{
    list-style-type: none;
    float: left;
    padding: 30px;
    background-color: black;
}
nav ul a{
    text-decoration: none;
    display: inline-block;
    width: 100px;
    color: white;
}
.submenu{
    display: none;
}
nav ul li:hover ul {
    display:inline-block;
    position:absolute;
    top: 15%;
    left: 0px;
    padding: 0px;
    z-index: 100000;
}
.submenu:hover{
    display: inline-block;
    position: absolute;
    text-align: center;
}

Le problème est donc qu'actuellement mon sous-menu (celui contenant les catégories) ne s'affiche pas très bien à l'écran, tout du moins pas comme je le souhaiterais.

Voila comment s'affiche actuellement le sous-menu :

Et moi je souhaiterais donc que ce sous-menu s'affiche en colonne et soit bien aligné sous le mot "Catégories" ainsi qu'il soit aligner à gauche de sa colonne (si possible, j'ai bien essayé de lui appliqué un text-align: left; mais ceci fût un échec).

Auriez-vous une solution pour faire ce que je souhaite ?

Merci d'avance à tous ceux qui m'apporteront leur aide.

Cordialement.

Quentin.

exen

22 septembre 2018 à 16:33:00

Bonjour,

Alors je n'ai pas encore regardé ton code, Mais en attendant je crois savoir ce qui pourrais t'aider.

Il te fraudais une grenouille, le truc étant qu'on ne la croise pas tout les jour, mais coup de bol la grenouille à un site

http://www.frogweb.fr/

-
Edité par exen 22 septembre 2018 à 16:33:26

Compos sui.

QuentinGiraud4

22 septembre 2018 à 16:47:32

exen a écrit:

Bonjour,

Alors je n'ai pas encore regardé ton code, Mais en attendant je crois savoir ce qui pourrais t'aider.

Il te fraudais une grenouille, le truc étant qu'on ne la croise pas tout les jour, mais coup de bol la grenouille à un site

http://www.frogweb.fr/

-
Edité par exen il y a 11 minutes

Bonjour,

J'ai déjà essayé de me rendre sur ce site mais malheureusement dans le cas de mon problème, il ne m'a pas été d'une très grande aide.

Je tiens par ailleurs a préciser que j'ai déjà effectué plusieurs recherches sur le web mais aucune n'a portée ses fruits et n'a aide à résoudre mon problème.

Cordialement.

Quentin.

exen

22 septembre 2018 à 16:49:44

Juste une question, tu utilise bootstrap en parallèle ?

Et encoreje viens de tester avec BS4 ça ne gène même pas :

<!DOCTYPE <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>OCR</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 

    <!--<link rel="stylesheet" type="text/css" media="screen" href="../css/main.css" />-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

    <link href="https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,700" rel="stylesheet">



    <style type="text/css">
     <style>
html,body {
  padding:0;
  margin:0;
  height:100%;
}
#menu, #menu ul {
  padding:0;
  margin:0;
  list-style: none;
  text-align: center;
}

#menu li {
  display:inline-block;
  vertical-align: top;
  position: relative;
}
#menu li li {
  display:inherit;
}
#menu a {
  display:block;
  padding:5px 50px;
  text-decoration: none;
  color:#fff;
  font-family:arial;
}
#menu ul li a {
  padding:5px 8px;
}
#menu ul {
  position: absolute;
  z-index: 1000;
  min-width:100%;
  white-space: nowrap;
  text-align: left;
}
#menu ul ul {
  left:100%;
  top:0;
  overflow: hidden;
  max-width: 0;
  min-width: 0;
  transition: 0.3s all;
}
#menu ul li:hover ul {
  max-width: 30em;
}
#menu ul li {
  max-height:0;
  overflow: hidden;
  transition:all 0.8s;
}
#menu li li li {
  max-height: inherit;
}
#menu li:hover li {
  max-height: 15em;
  overflow: visible;
}
/* background des liens menus */
.violet {
background-color: #65537A;
background-image:linear-gradient(to bottom, #65537A 0%, #2A2333 100%);
}
.violet li {
    background:#2A2333
}
.violet li:hover {
    background:#65537A
}
.bleu {
background-color: #729EBF;
background-image:linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
}
.bleu li {
    background:#333A40
}
.bleu li:hover {
    background:#729EBF
}
.orange {
background-color: #F6AD1A;
background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);
}
.orange li {
    background-color:#9F391A;
}
.orange li:hover {
    background:#F6AD1A
}
.vert{
background-color: #CFFF6A;
background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%);
}
.vert li {
    background-color:#677F35
}
.vert li:hover {
    background:#CFFF6A
}
#menu li:hover {
    background-image:none;
}
#menu li:hover a, .menu li li:hover a {
    color:#000
}
#menu li:hover li a, #menu li:hover li li a {
    color:#fff
}
#menu li:hover a, #menu li li:hover a, #menu li li li:hover a {
    color:#000
}

    </style>
</head>
<body>
<ul id="menu">
  <li class="violet"><a href="#">Accueil</a>
    <ul>
      <li><a href="#">Lien sous menu plus long</a>
    <ul>
      <li><a href="#">Lien sous sous menu</a></li>
      <li><a href="#">Lien sous sous menu</a></li>
      <li><a href="#">Lien sous sous menu plus long</a></li>
    </ul>
      </li>
      <li><a href="#">Lien sous sous menu</a>
    <ul>
      <li><a href="#">Lien sous sous menu</a></li>
      <li><a href="#">Lien sous sous menu</a></li>
      <li><a href="#">Lien sous sous menu</a></li>
    </ul>
      </li>
      <li><a href="#">Lien sous sous menu plus long</a>
    <ul>
      <li><a href="#">Lien sous sous menu</a></li>
      <li><a href="#">Lien sous sous menu</a></li>
      <li><a href="#">Lien sous sous menu</a></li>
    </ul>
      </li>
    </ul>
  </li><!--
--><li class="bleu"><a href="#">Catégories</a>
    <ul>
      <li><a href="#">Automobile</a>
    <ul>
      <li><a href="#">Lien sous sous menu</a></li>
      <li><a href="#">Lien sous sous menu</a></li>
      <li><a href="#">Lien sous sous menu</a></li>
    </ul>
      </li>
      <li><a href="#">Evenements</a>
    <ul>
      <li><a href="#">Lien sous sous menu</a></li>
      <li><a href="#">Lien sous sous menu</a></li>
      <li><a href="#">Lien sous sous menu</a></li>
    </ul>
      </li>
      <li><a href="#">Musique</a>
    <ul>
      <li><a href="#">Lien sous sous menu</a></li>
      <li><a href="#">Lien sous sous menu</a></li>
      <li><a href="#">Lien sous sous menu</a></li>
    </ul>
      </li>
    </ul>
  </li><!--
--><li class="orange"><a href="#">F.A.Q</a>
    <ul>
      <li><a href="#">Lien sous menu</a>
    <ul>
      <li><a href="#">Lien sous sous menu</a></li>
      <li><a href="#">Lien sous sous menu</a></li>
      <li><a href="#">Lien sous sous menu</a></li>
    </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
    <ul>
      <li><a href="#">Lien sous sous menu</a></li>
      <li><a href="#">Lien sous sous menu</a></li>
      <li><a href="#">Lien sous sous menu</a></li>
    </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
    <ul>
      <li><a href="#">Lien sous sous menu</a></li>
      <li><a href="#">Lien sous sous menu</a></li>
      <li><a href="#">Lien sous sous menu</a></li>
    </ul>
      </li>
    </ul>
  </li><!--
--><li class="vert"><a href="#">Mon compte</a>
    <ul>
      <li><a href="#">Lien sous menu</a>
    <ul>
      <li><a href="#">Lien sous sous menu</a></li>
      <li><a href="#">Lien sous sous menu</a></li>
      <li><a href="#">Lien sous sous menu</a></li>
    </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
    <ul>
      <li><a href="#">Lien sous sous menu</a></li>
      <li><a href="#">Lien sous sous menu</a></li>
      <li><a href="#">Lien sous sous menu</a></li>
    </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
    <ul>
      <li><a href="#">Lien sous sous menu</a></li>
      <li><a href="#">Lien sous sous menu</a></li>
      <li><a href="#">Lien sous sous menu</a></li>
    </ul>
      </li>
    </ul>
  </li><!--
--><li class="vert"><a href="#">Contact</a>
    <ul>
      <li><a href="#">Lien sous menu</a>
    <ul>
      <li><a href="#">Lien sous sous menu</a></li>
      <li><a href="#">Lien sous sous menu</a></li>
      <li><a href="#">Lien sous sous menu</a></li>
    </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
    <ul>
      <li><a href="#">Lien sous sous menu</a></li>
      <li><a href="#">Lien sous sous menu</a></li>
      <li><a href="#">Lien sous sous menu</a></li>
    </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
    <ul>
      <li><a href="#">Lien sous sous menu</a></li>
      <li><a href="#">Lien sous sous menu</a></li>
      <li><a href="#">Lien sous sous menu</a></li>
    </ul>
      </li>
    </ul>
  </li>
</ul>
</body>
</html

-
Edité par exen 22 septembre 2018 à 17:03:59

Compos sui.