Discussion :

[PaRaDiGm]

Bonjour,

J'ai un dropdown menu on hover comme ceci:

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div class="h-header-menu">
 <ul>
  <li class="dropdown"><a href="http://www.page.com/">Videos ▾</a>
   <ul>
    <li><a href="http://www.page.com/1/">1</a></li>
    <li><a href="http://www.page.com/2/">2</a></li>
   </ul>
  </li>
 <ul>
</div>

Code :

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
.h-header-menu {
	position:absolute;
	top:34px;
	left:121px;
	z-index: 100;
	color:#fff
}
.h-header-menu ul {
	list-style:none;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:14px;
	color:#fff;
	text-transform: uppercase;
	padding: 0;
}
.h-header-menu ul a, .h-header-menu ul a:visited {
	color:#fff;
}
.h-header-menu ul a:hover {
	color:#FFE59A;
}
.h-header-menu li {
	float:left;
	margin:0 0px;
}
.h-header-menu ul li{
        text-align: center;
		margin-left: 5px;
		margin-right: 5px;
        line-height: 21px;
		background-color: #730000;
    }
.h-header-menu ul li a{
        display: block;
        padding: 0px 0px;
        color: #fff;
        text-decoration: none;
    }
.h-header-menu ul li ul li{
	text-align: left;
	padding-left: 12px;
	background-image:url(images/b-header-menu-bookmark.png);
	background-repeat:no-repeat;
	background-position:left center;
	font-size:12px;
	width:120px;
}
li.dropdown {
			width:65px;
	}
li.dropdown2 {
	width:150px;
	}
.h-header-menu ul li a:hover{
        color: #FFE59A;
    }
.h-header-menu ul li ul{
        display: none;
		width:120px;
 
    }
.h-header-menu ul li:hover ul{
        display: block; /* display the dropdown */
    }

J'aimerai avoir plusieurs UL pour que chaque UL represente une colonne, comme ceci:

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
<div class="h-header-menu">
 <ul>
  <li class="dropdown"><a href="http://www.page.com/">Videos ▾</a>
   <ul>
    <li><a href="http://www.page.com/1/">1</a></li>
    <li><a href="http://www.page.com/2/">2</a></li>
   </ul>
   <ul>
    <li><a href="http://www.page.com/3/">3</a></li>
    <li><a href="http://www.page.com/4/">4</a></li>
   </ul>
   <ul>
    <li><a href="http://www.page.com/5/">5</a></li>
    <li><a href="http://www.page.com/6/">6</a></li>
   </ul>
  </li>
 <ul>
</div>

Merci pour votre aide.

[Erwan31]

Sur quoi vous bloquez?

[PaRaDiGm]

Le dropdown menu on hover marche, mais j'aimerai qu'au lieu qu'il y'ait qu'une liste, il y'ait plusieurs colonnnes, donc plusieurs listes les une à cotés des autres.

J'ai essayé de mettre un float left à .h-header-menu ul li ul mais ca ne donne pas grand chose.

[Erwan31]

Essayez plutôt avec

Code :

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

display:inline-block; vertical-align: top

Et si les 3 blocs doivent avoir la même hauteur il faudra passer par du display:table-cell (avec un dsiplay table sur la div parente)

[PaRaDiGm]

Ca marche, merci beaucoup.