J'ai un problème avec le menu déroulant , lorsque vous réduisez la taille du navigateur, puis agrandissez à nouveau le menu ne retourne a le premier arrangement horizontal reste vertical. Comment corrigez-vous cela?
Aperçu: https://mimo1100.blogspot.com/


Code HTML
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
<ul class='orion-menu'>
<li><a href='' itemprop='url' title=''><span itemprop='name'>
<i aria-hidden='true' class='fas fa-home' style='font-size:1.2em;'/>
menu 1</span></a></li>
   <li><a href='' itemprop='url' title=''><span itemprop='name'>
<i aria-hidden='true' class='fas fa-laptop' style='font-size:1.2em;'/>
menu 2</span></a></li>
<li><a href='' itemprop='url' title=''><span itemprop='name'>
<i aria-hidden='true' class='fas fa-tv' style='font-size:1.2em;'/>
menu 3</span></a></li>
   <li><a href='' itemprop='url' title=''><span itemprop='name'>
<i aria-hidden='true' class='fas fa-mobile-alt' style='font-size:1.2em;'/>
menu  4</span></a></li>
   <li><a href='' itemprop='url' title=''><span itemprop='name'>
<i aria-hidden='true' class='far fa-hdd' style='font-size:1.2em;'/>
menu 5</span></a></li>
  <li class='menu-button'><a class='dropdown-toggle parent' href='javascript:void(0)'>
<i aria-hidden='true' class='fas fa-server' style='font-size:1.2em;'/>
menu 6</a>
    <ul class='menu-dropdown'>
   <li><a href='' itemprop='url' title=''><span itemprop='name'>
<i aria-hidden='true' class='fas fa-server' style='font-size:1.2em;'/>
menu 9</span></a></li>
   <li><a href='' itemprop='url' title=''><span itemprop='name'>
<i aria-hidden='true' class='fas fa-server' style='font-size:1.2em;'/>
menu 10</span></a></li>
<li/>
     </ul>
</li>
   <li><a href='' itemprop='url' title=''><span itemprop='name'>
<i aria-hidden='true' class='far fa-money-bill-alt' style='font-size:1.2em;'/>
menu 7</span></a></li>
   <li><a href='' itemprop='url' title=''><span itemprop='name'>
<i aria-hidden='true' class='far fa-caret-square-left' style='font-size:1.2em;'/>
menu 8</span></a></li>
    </ul>


Code Css
Code css : 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
#ContactForm1{display:none}
.orion-menu{ margin:0;  padding:0;  text-align:center;  position:relative;  background:#0097a7;  list-style:none;  bottom:13px}
.orion-menu li{ display:inline-block;  font-size:15px;  margin:0px;  padding:0;  line-height:20px;  position:relative}
.orion-menu li a{ padding:27px 22px 20px;  color:#fff;  text-decoration:none;  display:inline-block;  -o-transition:color .3s linear,background .3s linear;  -webkit-transition:color .3s linear,background .3s linear;  -moz-transition:color .3s linear,background .3s linear;  transition:color .3s linear,background .3s linear}
.orion-menu li:hover >a{ color:#fff}
.orion-menu li.active >a{ background:#555}
.orion-menu >li >a{ text-transform:uppercase}
 
.orion-menu ul, 
.orion-menu ul li ul{ list-style:none;  margin:0;  padding:0;   display:none;  position:absolute;  z-index:999;  width:150px;  background:#0097a7}
.orion-menu ul{ top:68px;  right:0}
.orion-menu ul li ul{ top:0;  right:150px}
.orion-menu ul li{ clear:both;  width:100%;  font-size:14px}
.orion-menu ul li a{ width:100%;  padding:12px 22px;  display:inline-block;  float:right;  clear:both;  box-sizing:border-box;  -moz-box-sizing:border-box;  -webkit-box-sizing:border-box}
.orion-menu ul li:hover >a{ background:#555}
 
.orion-menu .indicator{ color:#bababa;  position:absolute;  left:8px;  top:30px;  font-family:'FontAwesome';  font-size:12px}
.orion-menu .indicator:before{ content:"\f0d7"}
.orion-menu ul li .indicator{ left:20px;  top:13px}
.orion-menu ul li .indicator:before{ content:"f0da"}
 
.orion-menu li.social{ float:left;  margin-left:20px}
.orion-menu li.social a{ display:inline-block;  padding:24px 6px 24px;  color:#bababa;  position:relative;  width:15px;  text-align:center}
.orion-menu li.social a:hover{ color:#fff}
.orion-menu li.social a .tooltip{ width:70px;  padding:5px;  background:#555;  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  opacity:0;  position:absolute;  font-size:9px;  top:-20px;  left:-27px;  border-radius:2px;  text-align:center;  -o-transition:opacity .3s linear;  -webkit-transition:opacity .3s linear;  -moz-transition:opacity .3s linear;  transition:opacity .3s linear}
.orion-menu li.social a:hover .tooltip{ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";  opacity:1}
.orion-menu li.social a .tooltip:before, 
.orion-menu li.social a .tooltip:after{ content:'';  position:absolute;  bottom:-8px;  left:50%;  margin-left:-7px;  width:0;  height:0;  border-left:8px solid transparent;  border-right:8px solid transparent;  border-top:8px solid #555}
 
.orion-menu >li.showhide{ display:none;  width:100%;  height:50px;  cursor:pointer;  color: #fff;  background:#0097a7}
.orion-menu >li.showhide span.title{ margin:16px 0 0 18px;  float:right}
.orion-menu>li.showhide span.icon{ margin:17px 0px;  float:left}
.orion-menu >li.showhide .icon em{ margin-bottom:3px;  display:block;  width:20px;  height:2px;  background:#fff}
 
.blue, .blue li ul, .blue ul li ul, .blue >li.showhide{background:#008C9E}
.blue li a, .orion-menu li.social a{color:#dedede}
.blue li.active >a, .blue ul li:hover >a, .blue li.social a .tooltip{background:#009fb4}
.blue li.search form input.search:focus{background-color:#009fb4}
.blue li.social a .tooltip:before, .blue li.social a .tooltip:after{border-top-color:#009fb4}
@media only screen and (max-width:1200px){ .orion-menu{ padding:0px 15px;  display:block}
 
 .orion-menu li{ display:block;  width:100%}
 .orion-menu >li >a{ padding:16px 70px 16px 18px;  text-align:right;  border-top:solid 1px rgba(255,255,255,0.05);  box-sizing:border-box;  -moz-box-sizing:border-box;  -webkit-box-sizing:border-box}
 .orion-menu a{ width:100%;  box-sizing:border-box;  -moz-box-sizing:border-box;  -webkit-box-sizing:border-box}
.orion-menu>li.showhide span.icon{ margin:17px 0px;  float:left}
 .orion-menu ul, 
 .orion-menu ul li ul{ width:100%;  left:0;  padding:0 20px;  position:static;  box-sizing:border-box;  -moz-box-sizing:border-box;  -webkit-box-sizing:border-box}
 .orion-menu .indicator{ left:20px;  top:18px}
 .orion-menu ul li .indicator{ display:block}
 .orion-menu ul li .indicator:before{ content:"\f0d7"}
 .orion-menu li.search{ border-bottom:none}
 .orion-menu li.search form{ margin:20px 18px 0 18px}
 .orion-menu li.search form input.search, 
 .orion-menu li.search form input.search:focus{ width:100%;  color:#fff;  background-color:#555;  background-position:99% 8px;  cursor:auto;  box-sizing:border-box;  -moz-box-sizing:border-box;  -webkit-box-sizing:border-box}
 
 .orion-menu li.social a{ display:inline;  padding:8px 15px 8px 15px;  border:none}
 .orion-menu li.social a:hover{ color:#fff}
 .orion-menu li.social a:hover .tooltip{ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  opacity:0}
 .orion-menu >li.showhide{ display:block}
}
@media only screen and (max-width:768px){ .orion-menu{ padding:0px 15px;  display:block}
 
 .orion-menu li{ display:block;  width:100%}
 .orion-menu >li >a{ padding:16px 70px 16px 18px;  text-align:right;  border-top:solid 1px rgba(255,255,255,0.05);  box-sizing:border-box;  -moz-box-sizing:border-box;  -webkit-box-sizing:border-box}
 .orion-menu a{ width:100%;  box-sizing:border-box;  -moz-box-sizing:border-box;  -webkit-box-sizing:border-box}
 .orion-menu ul, 
 .orion-menu ul li ul{ width:100%;  left:0;  padding:0 20px;  position:static;  box-sizing:border-box;  -moz-box-sizing:border-box;  -webkit-box-sizing:border-box}
 .orion-menu .indicator{ left:20px;  top:18px}
 .orion-menu ul li .indicator{ display:block}
 .orion-menu ul li .indicator:before{ content:"\f0d7"}
 .orion-menu li.search{ border-bottom:none}
 .orion-menu li.search form{ margin:20px 18px 0 18px}
 .orion-menu li.search form input.search, 
 .orion-menu li.search form input.search:focus{ width:100%;  color:#fff;  background-color:#555;  background-position:99% 8px;  cursor:auto;  box-sizing:border-box;  -moz-box-sizing:border-box;  -webkit-box-sizing:border-box}
 
 .orion-menu li.social a{ display:inline;  padding:8px 15px 8px 15px;  border:none}
 .orion-menu li.social a:hover{ color:#fff}
 .orion-menu li.social a:hover .tooltip{ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  opacity:0}
 .orion-menu >li.showhide{ display:block}
[class*="col-"]{padding:0px 0px; float:right}
*{border-radius:0 !important; -webkit-transition:all .0s ease-in-out 0s; transition:all .0s ease-in-out 0s}


script
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){$.fn.orion=function(n){function i(){$(".orion-menu").find("li, a").unbind(),$(".orion-menu").find("ul").hide(0),window.innerWidth<=1200?(s(),e(),0==t&&$(".orion-menu > li:not(.showhide)").hide(0)):(d(),o())}function o(){$(".orion-menu li").bind("mouseover",function(){$(this).children("ul").stop(!0,!0).fadeIn(l.speed).addClass(l.animation)}).bind("mouseleave",function(){$(this).children("ul").stop(!0,!0).fadeOut(l.speed).removeClass(l.animation)})}function e(){$(".orion-menu li:not(.showhide)").each(function(){$(this).children("ul").length>0&&$(this).children("a").bind("click",function(){$(this).siblings("ul").slideToggle(l.speed).addClass(l.animation),t=1})})}function s(){$(".orion-menu > li.showhide").show(0),$(".orion-menu > li.showhide").bind("click",function(){$(".orion-menu > li").is(":hidden")?($(".orion-menu > li").slideDown(300),t=1):($(".orion-menu > li:not(.showhide)").slideUp(300),$(".orion-menu > li.showhide").show(0),t=0)})}function d(){$(".orion-menu > li").show(0),$(".orion-menu > li.showhide").hide(0)}var l={speed:300,animation:"fading",indicator:!0};$.extend(l,n),$(".orion-menu").prepend("<li class='showhide'><span class='title'>القائمة</span><span class='icon'><em></em><em></em><em></em><em></em></span></li>");var t=0;1==l.indicator&&$(".orion-menu").find("li").each(function(){$(this).children("ul").length>0&&$(this).append("<span class='indicator'></span>")}),i(),$(window).resize(function(){i()})},$(document).ready(function(){$(".panel a").click(function(n){n.preventDefault();var i=$(this).attr("class");$(".orion-menu").removeAttr("class").addClass("orion-menu").addClass(i)})}),jQuery(document).ready(function(){$().orion({speed:500})})});
//]]>  
</script>