http://couponhai.in/... check it Css is here: /* main-menu class has further sub class .has-sub for dropdown */ .main-nav{ float: right; } #main-menu{} #main-menu > li{ float: left; border-left: 2px solid rgb(225, 225, 225); padding: 2px 20px 3px; position: relative; z-index:999; } #main-menu > li:first-child{ border-left: 0 ; z-index:999; } #main-menu > li > a{ font-size: 1.076923076923077em; position: relative; z-index:999; } #main-menu > li.has-sub > a:before{ content: ""; position: absolute; top: 7px; right: -18px; width: 0; height: 0; border-style: solid; border-width: 5px 5px 0 5px; border-color: #777777 transparent transparent transparent; z-index:999; } #main-menu > li.active > a,#main-menu > li > a:hover {enter code here background: #fff; color: #FFBE19; transition:color 0.3s; -o-transition:color 0.3s; -ms-transition:color 0.3s; -moz-transition:color 0.3s; -webkit-transition:color 0.3s; text-decoration: none; z-index:999; } #main-menu > li.has-sub{ padding-left: 9px; padding-right: 35px; z-index:999; } #main-menu > li.has-sub:after{ content: ""; position: absolute; width: 100%; height: 8px; background: #fff; bottom: -8px; left: 0; z-index:999999999; display: none; } #main-menu > li.has-sub:hover:after{ display: block; } #main-menu > li.has-sub:hover{ box-shadow: 0 -1px 5px 1px rgba(255, 190, 25, 0.2); background: #fff; border-left: 0; margin-left: 2px; padding-top: 8px; margin-top: -6px; border-top-left-radius: 4px; border-top-right-radius: 4px; } #main-menu > li:hover{ box-shadow: 0 -1px 5px 1px rgba(255, 190, 25, 0.2); background: #fff; border-left: 0; margin-left: 2px; padding-top: 8px; margin-top: -6px; border-top-left-radius: 4px; border-top-right-radius: 4px; color:#ffbe19; } #main-menu > li.has-sub:hover a:before{ display: none; } #main-menu > li.has-sub:hover > a{ color: #FFBE19; text-decoration: none; } #main-menu > li.has-sub:hover + li{ border-left: 0; margin-left: 2px; } #main-menu > li > .sub-menu{ opacity: 0; visibility: hidden; position: absolute; list-style: none; margin: 0; padding: 0 0 5px 0; background: #ffffff; min-width: 190px; left: 0; top: 100%; box-shadow: 0 0 5px 2px rgba(255, 190, 25, 0.2); border-radius: 4px; border-top-left-radius: 0px; /*border-top-right-radius: 4px;*/ transition:opacity 0.3s; -o-transition:opacity 0.3s; -ms-transition:opacity 0.3s; -moz-transition:opacity 0.3s; -webkit-transition:opacity 0.3s; z-index: 999999999; } #main-menu > li > .sub-menu li:first-child{ margin-top: 8px; } #main-menu > li:hover > .sub-menu{ opacity: 1 ; visibility: visible; } .sub-menu > li{ padding: 0 5px; color:#AD0800; list-style-type: none; } .sub-menu > li > a{ display: block; background: #ffffff; font-family: "Open Sans", Times New Roman; font-weight: 400; font-size: 1.076923076923077em; color: black; padding: 4px; } #category .sub-menu > li > a{ display: block; background: #ffffff; font-family: "Open Sans", sans-serif; font-weight: bolder; font-size: 1.076923076923077em; color: #75c202; padding: 4px; z-index:999999999; } .cat-menu > li > a{ display: block; background: #ffffff; font-family: "Open Sans", Times New Roman; font-weight: 600; font-size: 1.023076923077em; color: black; padding: 4px; z-index:999999999; } .cat-menu > li > a:hover { color:#FFA43E; } .sub-menu > li > a:hover{ background: #f2f2f2; text-decoration: none; }
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)