<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/*
http://webdesign.tutsplus.com/tutorials/big-menus-small-screens-responsive-multi-level-navigation--webdesign-8452
*/

.nav{ list-style:none; *zoom:1; margin:0; padding:0;  }
.nav:before, .nav:after{ content:" ";  display:table; }
.nav:after{ clear:both; }

/*Rubriques*/
.nav li{ position:relative; }
.nav &gt; li{ display:inline-block; }
.nav a{ padding:10px 15px; text-decoration:none; display:inline-block; -webkit-transition:all 0.4s ease-in-out; -moz-transition:all 0.4s ease-in-out; -o-transition:all 0.4s ease-in-out; }

/* Sous rubriques */
.nav ul{ list-style:none; width:210px; margin:0; padding:0; -webkit-transition:all 0.4s ease-in-out; -moz-transition:all 0.4s ease-in-out; -o-transition:all 0.4s ease-in-out; }
.nav li ul{ text-align:left; z-index:800; }
.nav &gt; li &gt; ul &gt; li.hover &gt; ul{ left:100%; top:0; opacity:1; visibility:visible; display:block; }
.nav &gt; li &gt; ul &gt; li &gt; ul &gt; li.hover &gt; ul{ left:100%; top:0; opacity:1; visibility:visible; display:block; }
#menus .nav li li a{ display:block; position:relative; z-index:100; padding:10px; }

/*Sous sous rubriques*/
.nav li ul ul{ top:0px; }
.nav li li li a{ z-index:200; }

@media (max-width: 991px){
}
@media (min-width: 992px){
    .nav li ul{ position:absolute; left:0;  top:auto; opacity:0; visibility:hidden; }
    .nav &gt; li.hover &gt; ul{ left:0; opacity:1; visibility:visible; }
}</pre></body></html>