.venus-menu{ width:100%; margin:0; padding:0; position:relative; font-family:'Open Sans', sans-serif; list-style:none; } .venus-menu li{ display:inline-block; margin:0 7px 0 0; padding: 5px 0; float:left; line-height:42px; position:relative; } .activemr{ margin: 0; } .venus-menu > li > a{ font-size:12px; padding: 0 15px; color:rgba(255,255,255,1); text-decoration:none; display:block; -webkit-transition:color 0.2s linear, background 0.2s linear; -moz-transition:color 0.2s linear, background 0.2s linear; -ms-transition:color 0.2s linear, background 0.2s linear; -o-transition:color 0.2s linear, background 0.2s linear; transition:color 0.2s linear, background 0.2s linear; } .venus-menu li:hover > a, .venus-menu li.active a{ background:rgba(235,76,18,1); border-radius: 2px ; color:#fff; } .venus-menu li.active ul a{ background:rgba(255,255,255,1); color:rgba(27,26,53,1); } .venus-menu > li > a i{ color:#bababa; } .venus-menu > li:hover > a i, .venus-menu li.active a i{ color:#fff; } .venus-menu ul, .venus-menu ul li ul{ list-style:none; margin:0; padding:0; display:none; position:absolute; z-index:99; width:237px; } .venus-menu ul{ top:52px; left:0; padding-top:10px; background:rgba(255,255,255,1); box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.08); border-radius: 4px ; } .venus-menu > li > ul > li:first-child a:before{ } .venus-menu > li > ul > li ul li:first-child a:before{ } .venus-menu li ul li{ line-height: 31px; margin: 0 } .venus-menu ul li ul{ top:0; left:100%; } .venus-menu ul li{ clear:both; width:100%; border:none; } .venus-menu ul li a{ padding:2px 20px; width:100%; color:rgba(27,26,53,1); font-size:14px; text-decoration:none; display:inline-block; float:left; clear:both; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; -webkit-transition:background 0.2s linear; -moz-transition:background 0.2s linear; -o-transition:background 0.2s linear; -ms-transition:background 0.2s linear; transition:background 0.2s linear; } .venus-menu ul li:hover > a{ background:rgba(224,224,224,1); color:rgba(27,26,53,1); border-radius: 0px ; } .venus-menu > li > ul > li:first-child:hover a:before{ } .venus-menu > li > ul > li ul li:first-child:hover a:before{ } .venus-menu > li .indicator{ position:absolute; color:#bababa; top:19px; right:8px; font-size:20px; -webkit-transition:color 0.2s linear; -moz-transition:color 0.2s linear; -o-transition:color 0.2s linear; -ms-transition:color 0.2s linear; transition:color 0.2s linear; } .venus-menu > li:hover > .indicator{ color:rgba(27,26,53,1); } .venus-menu ul > li .indicator{ top:14px; right:8px; color:rgba(27,26,53,1); } .venus-menu i{ line-height:20px !important; margin-right:6px; font-size:20px; float:left; } .venus-menu > li.showhide{ display:none; width:100%; height:46px; cursor:pointer; color:#777; border-bottom:solid 1px rgba(0, 0, 0, 0.1); background:#fff; } .venus-menu > li.showhide span.title{ margin:13px 0 0 20px; float:left; } .venus-menu > li.showhide span.icon{ margin:16px 20px; float:right; } .venus-menu > li.showhide .icon em{ margin-bottom:3px; display:block; width:20px; height:2px; background:#ccc; } .zoom-out{ -webkit-animation:zoomOut 600ms ease both; -moz-animation:zoomOut 600ms ease both; -o-animation:zoomOut 600ms ease both; -ms-animation:zoomOut 600ms ease both; animation:zoomOut 600ms ease both; }