/* Item Name : CSS3 Mega Drop Down Menu Author URI : http://themeforest.net/user/Keliah Item URI : http://codecanyon.net/item/css3-mega-drop-down-menu/126387 Version : 2.1 */ /* TABLE OF CONTENTS 01 MENU BAR 02 DROP DOWN MENU 03 CONTENT STYLINGS 04 CONTACT FORM */ /* ______________________________________ 01 MENU BAR _______________________________________ */ .menu{width:960px;margin:0 auto;z-index:100;position:relative;list-style:none;height:30px;padding:0;} .menu li.submenu{float:left;text-align:center;position:relative;border:none;padding-right:20px} .menu li:hover {z-index:2;} .menu .submenu> a{ outline:0;text-decoration:none;display:block;text-transform: capitalize;/*letter-spacing:-0.5px;*/background: url(../images/i_dropdown.png) no-repeat right 12px; font-size: 16px; outline: 0 none; padding: 0 10px 0 0; cursor:pointer;} .menu .submenu > a.nobg{background:none !important;} .menu li > a span{display:block;height:30px;line-height:30px;} .menu li.submenu:hover> a { text-decoration: none; color: #8FAA1F;background-image: url(../images/i_dropdown_active.png); } .menu .submenu:hover{ /* background:url(../images/menu_hover.jpg) 0 0 repeat-x; */ } .menu .submenu:hover a{ text-decoration:none;} .menu .submenu a.sub-a{ font-size:13px; padding:0; text-decoration:none !important;} .menu li.submenu div a {color:#ffffff !important;background:none repeat scroll 0 0 #A9C251;outline:0; text-decoration:none; display:block; font-size:14px; text-transform:capitalize; padding:7px 10px; line-height:22px; font-family: Verdana,Geneva,sans-serif; white-space: nowrap;} .menu li div a:hover{ opacity:0.9; } /* Right aligned menu item */ .menu .right { float:right; right:0; margin-right:0px; } .menu li.submenu:hover ul li a{ padding-right:10px} /* _______________________________________ 02 DROP DOWN MENU _______________________________________ */ /* Left & right aligned common styles */ .menu .dropdown_1column, .menu .dropdown_1columns, .menu .dropdown_2columns, .menu .dropdown_3columns, .menu .dropdown_4columns, .menu .dropdown_5columns , .menu .dropdown_6columns { left:-999em;position:absolute;padding:6px 10px 10px;text-align:left;margin: 0 auto;border-top:1px solid #93AE21 } .menu .dropdown_1columns .col_1{ margin-left:0 !important; width:160px;} .menu .dropdown_1columns .col_2 .firstcolumn{ margin-left:0 !important; width:281px;} .menu .dropdown_1columns .col_3{ margin-left:0 !important; width:170px;} .menu .col_2 .firstcolumn .col_1 li { width:270px;} /* Showing Drop Down on Mouse Hover - Left aligned */ .menu li:hover .dropdown_1column, .menu li:hover .dropdown_1columns{ left:-10px; top:30px; } .menu li:hover .dropdown_2columns, .menu li:hover .dropdown_3columns, .menu li:hover .dropdown_4columns, .menu li:hover .dropdown_5columns, .menu li:hover .dropdown_6columns { left:-10px; top:26px; } .menu .dropdown_1columns { padding-left:0; padding-right:0; } .menu .dropdown_1columns h2{ padding-left:10px; padding-right:10px;} .menu .dropdown_1columns ul{ width:160px;} .menu .dropdown_1columns ul li a{ padding:5px 10px; } .menu .dropdown_1columns .col_1 .col_1 a{ padding-right:10px;} .menu .dropdown_1columns li ul{ left:100%; border-top:1px solid #79BCB9; } /* Showing Drop Down on Mouse Hover - Right aligned */ .menu li .align_right { } .menu li:hover .align_right { left:auto; right:0px; } /* Columns Sizes */ .menu .firstcolumn.first{ padding-bottom:30px;} .menu .firstcolumn { margin-left: 0!important; clear: left; } .menu .col_1, .menu .col_2, .menu .col_3, .menu .col_4, .menu .col_5, .menu .col_6 { display:inline; float: left; position: relative; clear:none; margin-left:10px;background:none repeat scroll 0 0 #A9C251;} .menu .col_1 {width:148px;} .menu .col_2 {width:280px;} .menu .col_2 .col_1 li {width:280px;} .menu .col_3 {width:276px;} .menu .col_4 {width:620px;} .menu .col_5 {width:780px;} .menu .col_6 {width:940px;} .col_1 .level-top :hover,.col_1.level-top :hover,.col_1.level-top :hover {background:#8EA344;} /* IMPORTANT */ /* Use the firstcolumn class for the items that stick to the left edge of the dropdown */ /* _______________________________________ 03 CONTENT STYLINGS _______________________________________ */ .menu p, .menu ul, .menu li, .menu h2, .menu h3 { font-size:14px; text-align:left; } .menu p { font-size:11px; line-height:18px; margin-bottom:10px; } .menu .strong { font-weight:bold; } .menu .italic { font-style:italic; } .menu h2 {font-size:14px;padding:9px 0 10px;margin:0; text-transform:capitalize;} .menu .pusher { /* Use this pucher if you want to give more vertical spacing between your rows of content */ margin-top:18px; } /* Icon paragraphs */ .menu .help, .menu .favorite, .menu .mail, .menu .print { padding-left:36px; margin-bottom:18px; } /* Images styles */ .menu .imgshadow_dark{ /* Better style on dark background */ padding:4px; margin-top:5px; } .menu .imgshadow_light { /* Better style on light background */ padding:4px; margin-top:5px; } .menu .img_left { /* Image sticks to the left */ width:auto; float:left; margin:2px 15px 5px 0px; } .menu .img_right { /* Image sticks to the right */ width:auto; float:right; margin:2px 0px 5px 15px; } /* Box styles */ .menu li .black_box { margin:4px 6px; } .menu li .dark_grey_box { margin:4px 6px; } /* Standard lists styles */ .menu li ul { list-style:none; padding:0; margin:0 0 12px 0; } .menu li ul li { font-size:12px; position:relative; margin:0; height:auto; float:left; text-align:left; width: 170px; } .menu li ul li:hover { background:#E5DED6; border:none; margin:0; } /* Greybox lists styles */ .menu li .greybox li { margin:0px 0px 4px 0px; padding:4px 6px 4px 6px; width:131px; } .menu li .greybox li:hover { padding:4px 6px 4px 6px; margin:0px 0px 4px 0px; } /* Other lists styles */ .menu li .plus li { margin:0px 0px 4px 0px; padding:0px 0px 0px 21px; width:109px; } .menu li .plus li:hover { padding:0px 0px 0px 21px; margin:0px 0px 4px 0px; } /* Social Icons */ .menu li ul.social { list-style:none; margin:0; padding:0; } .menu li ul.social li { padding-top:5px; margin:0 12px 12px 0; float:left; position:relative; display:inline; width:32px; } .menu li ul.social li:hover { padding-top:5px; margin:-1px 12px 12px 0; } .menu li ul.social li span { display:none; } .menu .levels ul { /* First level drop down */ position:absolute; z-index:500; top:0; display:none; padding:0 0 10px; } .menu .levels ul ul { left:100%; margin:0px; } .menu .levels li:hover { cursor:pointer; z-index:100; } .menu .levels li:hover > ul {display:block;} .menu li.position-right-li{ position:static} .menu li:hover div.position-right{ position:absolute; right:0; left:auto; top:30px; } /* _______________________________________ 04 CONTACT FORM _______________________________________ */ /*contact form----------------------------*/ .menu #contactForm .fieldset{padding:3px 0 0;overflow:hidden;height:100%;} .menu #contactForm .fieldset .legend{display:none;} .menu #contactForm .fields .field{width:auto} .menu #contactForm .form-list li, #contactForm .form-list li.fields, #contactForm .form-list li.wide{margin:0} .menu #contactForm .form-list .input-box{width:auto;margin:4px 0 6px 0;} .menu #contactForm .form-list input.input-text{width:298px; height:23px;line-height:23px;padding:0; border-radius:0;float:none;} .menu #contactForm .form-list label{ font-size:11px;font-family:Tahoma, Georgia, Arial;line-height:18px;padding:0;} .menu #contactForm .form-list label.required em {color:#b48ea9} .menu #contactForm .form-list li.wide textarea{width:290px;border:1px solid #e0e0e0;height:127px;overflow-y:auto;margin:4px 0 0 0;resize:none;} .menu #contactForm .buttons-set p.required{display:none} .menu #contactForm .buttons-set{margin:0 0 10px;padding:0;float:left;width:auto;} .menu #contactForm .buttons-set button.button{margin:0;float:none;} .menu #contactForm .buttons-set button.button span{background:url(../images/btn_checkout_left.png) no-repeat 0 0;color:#fff} .menu #contactForm .buttons-set button.button span span{background:url(../images/btn_checkout_right.png) no-repeat 100% 0;} /* Messages when sending email */ .error, .sent { font-size:12px; line-height:18px; padding:5px; margin-bottom:10px; } .error { background:#f3afa6; border:#ef9588 solid 1px; color:#992213; } .sent { background:#bef08f; border:#adec71 solid 1px; color:#37620d; } .menu .style_6 ul li{ line-height:normal; } .menu .products-list .product-image { margin: 0 10px 5px 0; } .menu .products-list .product-image { height: 136px!important; width: 101px!important; } .menu .products-list li{ margin-left:0 !important;} .menu .products-list li .product-shop{ margin-top:4px !important; float:left; width:155px; } .menu label{ color:#6AB5B1; font-size:12px; padding-bottom:5px; display:block;} .menu .mega-video{ padding-top:10px} .menu .product-name a{ color:#639693!important; line-height:18px;} .menu .price-box .old-price .price{ color:#535353;} .menu .price-box .old-price .price-label{ color:#888;} .menu .price-box .special-price .price{ color:#AF6D9F;} .menu .tooltip-menu span{ color:#cf88bc; font-style:italic;} .menu a.image{ float:left; padding-right:20px!important;} .menu .col_1 .products-list .product-shop{ display:block; clear:left; float:none;}