[CSS 3] Dropdown menu et flèches de direction

1 pièce(s) jointe(s)

Dropdown menu et flèches de direction

Bonjour,
Mon site sous boostrap 4 comporte des menus et sous-menus
Pièce jointe 407050
avec le code suivant:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="http://google.com">Insectes</a>
            <ul class="dropdown-menu z-depth-2 ">
              <li><a class="dropdown-item dropdown-cote" href="#">papillons</a></li>
              <li><a class="dropdown-item dropdown-cote" href="#">Abeilles</a></li>
              <li class="dropdown-submenu">
				<a class="dropdown-item dropdown-toggle" href="#">Autres insectes</a>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item dropdown-cote" href="#">Libellules</a></li>
                  <li><a class="dropdown-item dropdown-cote" href="#">Autres</a></li>
                </ul>
              </li>
            </ul>
          </li>
		  <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="http://google.com">Parcs Animaliers</a>
            <ul class="dropdown-menu">
				<li><a class="dropdown-item dropdown-cote"   href="jurafaune.php">Jurafaune</a></li>
				<li><a class="dropdown-item dropdown-cote"   href="citadelle.php">Citadelle</a></li>
				<li><a class="dropdown-item dropdown-cote"   href="dombes.php"><i class="fas fa-dove"></i> Parc des Oiseaux de Villars les Dombes</a></li>
				<div class="divider"></div>
				<li><a class="dropdown-item dropdown-cote"   href="#">Autres</a></li>
            </ul>
          </li>

Je voudrais aligner les flèches à droite et les faire pivoter au passage de la souris.
C'est apparemment "dropdown-toggle" qui s'en charge, mais je n'arrive pas à comprendre comment le customiser.
Merci d'avance

Bonsoir, où est ton code CSS ? Ou bien tu veux qu'on fasse tout à ta place ?

Cordialement.

Citation:

Envoyé par Manequin

Bonsoir, où est ton code CSS ? Ou bien tu veux qu'on fasse tout à ta place ?

Cordialement.

c'est mieux comme ça ?:mouarf:

Code:

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
 
.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}
/*bandeau principal */
.navbar-expand-lg 
{
	background: radial-gradient(ellipse at center top,  rgba( 200, 200, 200, 0.9) 10% ,  rgba( 0, 0, 0, 0.6) 75%);
	border-bottom: 3px inset #808080;
	font-size:1.1rem;
}
/*signets */
.navbar-expand-lg .navbar-nav > li > a 
{
	color: rgba(6, 71, 137, 1);
	background-image: radial-gradient(circle farthest-corner at left top,  rgba(210, 210, 210, 0.8) 0%, rgba(115, 111, 114, 1) 100%);
	border:2px double rgba( 44, 44, 44, 0.6);
}
/*signets survolés */
.navbar-expand-lg .navbar-nav > li > a:hover,
.navbar-expand-lg .navbar-nav > li > a:focus 
{
	color:  rgba(245, 237, 240, 1);
	background: radial-gradient(ellipse at center top,  rgba(178, 178, 178, 1) 0%, rgba(115, 111, 114, 1));
}
/*fond des signets */
.navbar-expand-lg .navbar-nav > li > .dropdown-menu
{
	background-color: rgba(46, 64, 87, 0.7);
	border-radius:15px;
	border-style : outset ;
}
/*signets secondaires */
.navbar-expand-lg .navbar-nav > li > .dropdown-menu > li > a 
{
	background: radial-gradient(ellipse at center top,  rgba(178, 178, 178, 1) 0%, rgba(115, 111, 114, 1));
	color:  rgba(245, 237, 240, 1);
	border:2px ridge #686868;
	font-size:1.1rem;
}
/*signets secondaires survolés */
.navbar-expand-lg .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-expand-lg .navbar-nav > li > .dropdown-menu > li > a:focus 
{
	background-color: rgba(46, 64, 87, 0.7);
	background: radial-gradient(ellipse at center bottom,  rgba(178, 178, 178, 1) 0%, rgba(115, 111, 114, 1));
}
/*signet actif */
.navbar-expand-lg .navbar-nav > .active > a,
.navbar-expand-lg .navbar-nav > .active > a:hover,
.navbar-expand-lg .navbar-nav > .active > a:focus 
{
	color: rgba(46, 64, 87, 1);
	background: linear-gradient(to right,#ffffff, #686868);
}
 
.dropdown-item
{
	height:auto;
	 border:2px ridge #5e696b;
	background: radial-gradient(ellipse at center bottom,  rgba(178, 178, 178, 1) 0%, rgba(115, 111, 114, 1));
	font-size:1.1rem;
}
.dropdown-cote 
{
	background: radial-gradient(ellipse at center bottom,  rgba(178, 178, 178, 1) 0%, rgba(115, 111, 114, 1));
	  border:2px ridge #5e696b;
	font-size:1.1rem;
}
.dropdown-cote a:hover
{ 
	background: radial-gradient(ellipse at center top,  rgba(178, 178, 178, 1) 0%, rgba(115, 111, 114, 1));
	border:2px ridge #5e696b;
}
.dropdown-submenu 
{
	position: relative;  
}
.dropdown-submenu a::after 
{
	transform: rotate(-90deg);
	position: absolute;
	right: 6px;
	top: .8em;
	font-size:1.1rem;
}
.dropdown-submenu-right a::after 
{
	transform: rotate(90deg);
	position: absolute;
	left: 6px;
	top: .8em;
	font-size:1.1rem;
}
 
.dropdown-menu > li > a:hover:after {
    text-decoration: underline;
    transform: rotate(-90deg);
	font-size:1.1rem;
} 
.dropdown-submenu .dropdown-menu .dropdown-submenu-right
{
	top: 0;
	left: 100%;
	margin-left: .1rem;
	margin-right: .1rem;
	background-color: rgba(46, 64, 87, 0.7);
	border-radius:15px;
	border-style : outset ;
	border:4px double #2c2c2c;
}
/* rotate caret on hover */
 
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
	background-color: rgba(46, 64, 87, 0.7);
	border-radius:15px;
	border-style : outset ;
}
.dropdown-submenu .dropdown-menu>li>a:hover
{
 background-image: linear-gradient(#5b5b5b, #bab7b7);
}
.dropdown-submenu-right{position:relative;}
.dropdown-submenu-right>.dropdown-menu
{
	top:0;
	left:-100%;
	margin-top:-6px;
	background: radial-gradient(ellipse at center bottom,  rgba(178, 178, 178, 1) 0%, rgba(115, 111, 114, 1));
	border-radius:15px;
	border-style : outset ;
	text-align: right;
	}
.dropdown-submenu-right:hover>.dropdown-menu{display:block;}
 
.dropdown-submenu-right:hover>a:after
{
	border-left-color:#ffffff;
	background: radial-gradient(ellipse at center bottom,  rgba(178, 178, 178, 1) 0%, rgba(115, 111, 114, 1));
	}
.dropdown-submenu-right.pull-left{float:none;}
.dropdown-submenu-right.pull-left>.dropdown-menu
{
		left:-100%;
		background: radial-gradient(ellipse at center bottom,  rgba(178, 178, 178, 1) 0%, rgba(115, 111, 114, 1));
}
.navbar .nav li.dropdown.open>.dropdown-toggle .caret {
    border-top-color: transparent;
    border-bottom: 4px solid #000000;
    position: relative;
    top: -3px;
}

Ma boule de crystal plante. Moi même j'utilise bootstrap 4.
Pas de solution pour le moment.
Mais je ne sais pas si c'est possible de faire pivoter cette petite flèche au survol de la souris.

Cordialement.

Bonjour,

Code:

1
2
3
.dropdown-submenu li:hover > a:after {
    transform: rotate(0deg);
}

@jreaux je l'ai fait mais sans succès. :arf:

Cordialement.