Afficher des sous-menus sur plusieurs lignes

**Muchos** · 19/06/2014, 02h17

Je propose ce à quoi je pensais. Ça peut servir.
Ça passe bien sur mon Firefox 20, mais mal sur mes Chromium 25 et Opera 12. Donc j'imagine que IE n'aimera pas. En plus, ce n'est pas accessible au clavier

Voici le CodePen de test et le code:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
  <meta charset="UTF-8" />
  <title>Menu deux colonnes</title>
  <style type="text/css">
.menu, .menu ul {
  padding: 0;
}
.menu li {
  display: inline;
  position: relative;
}
.menu a {
  padding: 0 1ex;
  border: thin solid black;
  display: inline-block;
  line-height: 2rem;
  background: #FAFAD2;
  cursor: pointer;
}
.menu a:hover,
.menu a:focus {
  background: white;
}
.longList {
  /* Pour les sous-menus sur plusieurs colonnes */
  -webkit-columns: 2;
  -moz-columns: 2;
  -ms-columns: 2;
  columns: 2;
}
.longList li {
  display: block;
}
.submenu {
  visibility: hidden;
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 999;
}
li:hover > .submenu {
  visibility: visible;
  border-left: medium solid black;
}
  </style>
</head>
<body>
 
<nav>
<ul class="menu">
  <li><a>aaa</a>
    <ul class="longList submenu">
      <li><a href="#">foo</a></li>
      <li><a href="#">bar</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">bar</a></li>
    </ul>
  </li>
  <li><a>bbb</a>
    <ul class="submenu">
      <li><a>ccc</a>
        <ul class="longList submenu">
          <li><a href="#">foo</a></li>
          <li><a href="#">bar</a></li>
          <li><a href="#">foo</a></li>
          <li><a href="#">bar</a></li>
        </ul>
      </li>
      <li><a href="#">foo</a></li>
      <li><a href="#">bar</a></li>
    </ul>
  </li>
  <li><a>ddd</a>
    <ul class="longList submenu">
      <li><a href="#">foo</a></li>
      <li><a href="#">bar</a></li>
      <li><a href="#">foo</a></li>
      <li><a href="#">bar</a></li>
    </ul>
  </li>
</ul>
</nav>
 
<p>du texte...</p>
 
</body>
</html>

**laurentSc** · 20/06/2014, 11h24

Merci pour ta réponse, mais je n'aurai le temps de l'étudier que ce soir ou ce week-end...

Afficher des sous-menus sur plusieurs lignes

Tableau en CSS

Discussions similaires

Partager

Partager