.HeadTitle{ float:left; margin:16px 0 0 47px; } .content{ float:right; margin:18px 28px 0 16px; } .flexy-menu{ margin:0; width:100%; padding:0; position:relative; float:left; font-family:"Source Sans Pro",Segoe UI,Arial; list-style:none; background:#FFF; font-weight:bold; font-size:16px; } .flexy-menu li{ display:inline; margin:0; padding:0; float:left; line-height:20px; position:relative; } .flexy-menu>li>a{ padding:20px 22px; color:#000; text-decoration:none; display:block; text-transform:uppercase; -webkit-transition:color .2s linear,background .2s linear; -moz-transition:color .2s linear,background .2s linear; -o-transition:color .2s linear,background .2s linear; transition:color .2s linear,background .2s linear; } .flexy-menu li:hover>a,.flexy-menu li.active a{ background:#FFF; color:#000; } .flexy-menu li.right{ float:right; } .flexy-menu ul,.flexy-menu ul li ul{ list-style:none; margin:0; padding:0; display:none; position:static; z-index:99999; width:132px; background:#FFF; box-shadow:0 1px 1px rgba(0,0,0,0.3); } .flexy-menu ul{ top:60px; left:0; } .flexy-menu ul li ul{ top:0; left:100%; } .flexy-menu ul li{ clear:both; width:100%; border:0; font-size:15px; } .flexy-menu ul li a{ padding:10px 20px; width:100%; color:#000; font-size:16px; text-decoration:none; display:inline-block; float:left; clear:both; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -webkit-transition:color .2s linear,background .2s linear; -moz-transition:color .2s linear,background .2s linear; -o-transition:color .2s linear,background .2s linear; transition:color .2s linear,background .2s linear; } .thin>li>a{ padding:10px 22px; } .thin ul{ top:40px } .thick>li>a{ padding:40px 22px; } .thick ul{ top:100px; } .flexy-menu i{ line-height:20px!important; margin-right:6px; font-size:18px; float:left; }.flexy-menu>li.showhide{ display:none; width:100%; height:50px; cursor:pointer; color:#FFF; border-bottom:solid 1px rgba(0,0,0,0); background:#1641A0; } .flexy-menu>li.showhide span.title{ margin:16px 0 0 0; float:left; } .flexy-menu>li.showhide span.icon{ margin:17px 20px; float:left; } .flexy-menu>li.showhide .icon em{ margin-bottom:3px; display:block; width:20px; height:2px; background:#FFF; } .blue li:hover>a,.blue li.active a{ background:#1641A0; color:#fff!important; } .flexy-menu.vertical{ width:200px; } .flexy-menu.vertical li{ width:100%; } .flexy-menu.vertical li a{ display:inline-block!important; width:100%; padding:18px 20px 16px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .flexy-menu.vertical ul li{ width:100%; } .flexy-menu.vertical ul,.flexy-menu.vertical ul li ul{ width:150px; } .flexy-menu.vertical ul{ top:0; left:100%; } .flexy-menu.vertical ul li ul{ top:1px; } .flexy-menu.vertical.right{ float:right!important; } .flexy-menu.vertical.right ul{ left:-150px!important; } @media only screen and (max-width:1000px){ .flexy-menu{ margin:0; width:100%; padding:0; position:relative; float:left; font-family:"Source Sans Pro",Segoe UI,Arial; list-style:none; background:#FFF; font-size:12px; } .flexy-menu ul li{ clear:both; width:100%; border:0; font-size:12px; } .flexy-menu ul li a{ padding:10px 20px; width:100%; color:#000; font-size:13px; text-decoration:none; display:inline-block; float:left; clear:both; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -webkit-transition:color .2s linear,background .2s linear; -moz-transition:color .2s linear,background .2s linear; -o-transition:color .2s linear,background .2s linear; transition:color .2s linear,background .2s linear; } } @media only screen and (max-width:900px){ .HeadTitle{ width:100%; text-align:center; margin:16px 0 16px 0px; } .content{ width:100%; margin:0 0 0 0; } .flexy-menu.vertical{ width:100%; } .flexy-menu li{ display:block; width:100%; } .flexy-menu>li>a{ padding-top:15px; padding-bottom:15px; padding-left:25px; } .flexy-menu a{ width:100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .flexy-menu ul,.flexy-menu ul li ul,.flexy-menu.vertical ul,.flexy-menu.vertical ul li ul{ width:100%; left:0; border-left:0; position:static; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .flexy-menu ul li{ border-left:0; border-right:0; } .flexy-menu ul li a,.flexy-menu.vertical ul li a{ padding-top:10px; padding-bottom:10px; } .flexy-menu ul>li>a{ padding-left:40px!important; } }