/* Some stylesheet reset */ #cssmenu > ul { list-style: none; margin: 0; padding: 0; vertical-align: baseline; line-height: 1; } /* The container */ #cssmenu

> ul { display: block; position: relative; width: 150px; } /* The list elements which contain the links */ #cssmenu > ul li { display: block; position: relative; margin: 0; padding: 0; } /* General link styling */ #cssmenu > ul li a { /* Layout */ display: block; position: relative; margin: 0; border-top: 1px dotted #fff; border-bottom: 1px dotted #d9d9d9; padding: 11px 20px; line-height: 1.5; /* Typography */ font-family: Helvetica, Arial, sans-serif; color: #3dafea; text-decoration: none; text-transform: uppercase; text-shadow: 0 1px 0 #fff; font-size: 13px; font-weight: 300; /* Background & effects */ background: #eaeaea; } /* Rounded corners for the first link of the menu/submenus */ #cssmenu > ul li:first-child > a { border-top-left-radius: 4px; border-top-right-radius: 4px; border-top: 0; } /* Rounded corners for the last link of the menu/submenus */ #cssmenu > ul li:last-child > a { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom: 0; } /* The hover state of the menu/submenu links */ #cssmenu > ul li > a:hover, #cssmenu > ul li:hover > a {

color: #ffffff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); background: #54cdf1; /* background: -webkit-linear-gradient(bottom, #54cdf1, #74d7f3); */ /* background: -ms-linear-gradient(bottom, #54cdf1, #74d7f3); */ /* background: -moz-linear-gradient(bottom, #54cdf1, #74d7f3); */ /* background: -o-linear-gradient(bottom, #54cdf1, #74d7f3); */ border-color: transparent; } /* The arrow indicating a submenu */ #cssmenu > ul .has-sub > a::after { content: ''; position: absolute; top: 16px; right: 10px; width: 0px; height: 0px; /* Creating the arrow using borders */ border: 4px solid transparent; border-left: 4px solid #3dafea; } /* The same arrow, but with a darker color, to create the shadow effect */ #cssmenu > ul .has-sub > a::before { content: ''; position: absolute; top: 17px; right: 10px; width: 0px; height: 0px; /* Creating the arrow using borders */ border: 4px solid transparent; border-left: 4px solid #fff; } /* Changing the color of the arrow on hover */ #cssmenu > ul li > a:hover::after, #cssmenu > ul li:hover > a::after { border-left: 4px solid #ffffff; } #cssmenu > ul li > a:hover::before, #cssmenu > ul li:hover > a::before { border-left: 4px solid #ffffff; } /* THE SUBMENUS */ #cssmenu > ul ul { position: absolute; left: 150px; width: 150px; top: -9999px; padding-left: 5px; opacity: 0; /* The fade effect, created using an opacity transition */ -webkit-transition: opacity 0.3s ease-in; -moz-transition: opacity 0.3s ease-in;

-o-transition: opacity 0.3s ease-in; -ms-transition: opacity 0.3s ease-in; } #cssmenu > ul ul ul { left: 150px; } /* Showing the submenu when the user is hovering the parent link */ #cssmenu > ul li:hover > ul { top: 0px; opacity: 1; }