<!DOCTYPE html> <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' /> <link rel='stylesheet' type='text/css' href='styles.css' /> </head> <body> <div id='cssmenu'> <ul> <li class='last'><a href='index.html'><span>Home</span></a></li> <li class='has-sub'><a href='#'><span>Products</span></a> <ul> <li class='has-sub'><a href='#'><span>Product 1</span></a> <ul> <li><a href='#'><span>Sub Item</span></a></li> <li class='last'><a href='#'><span>Sub Item</span></a></li> </ul> </li> <li class='has-sub'><a href='#'><span>Product 2</span></a> <ul> <li><a href='#'><span>Sub Item</span></a></li> <li class='last'><a href='#'><span>Sub Item</span></a></li> </ul> </li> </ul> </li> <li><a href='#'><span>About</span></a></li> <li class='active'><a href='#'><span>Contact</span></a></li> </ul> </div> </body> </html>
@import url(http://fonts.googleapis.com/css?family=Oxygen+Mono); /* Starter CSS for Menu */ #cssmenu { padding: 0; margin: 0; border: 0; width: auto; border-top-left-radius:10px; border-top-right-radius:10px; } #cssmenu ul, #cssmenu li { list-style: none; margin: 0; padding: 0; float:right; } #cssmenu ul { position: relative; z-index: 597; } #cssmenu ul li { float: left; min-height: 1px; vertical-align: middle; } #cssmenu ul li.hover, #cssmenu ul li:hover { position: relative; z-index: 599; cursor: default; } #cssmenu ul ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%; } #cssmenu ul ul li { float: none; } #cssmenu ul ul ul { top: 0; left: 190px; width: 190px; } #cssmenu ul li:hover > ul { visibility: visible; } #cssmenu ul ul { bottom: 0; left: 0; } #cssmenu ul ul { margin-top: 0; } #cssmenu ul ul li { font-weight: normal; } #cssmenu a { display: block; line-height: 1em; text-decoration: none; } /* Custom CSS Styles */ #cssmenu { background: #333333; border-bottom: 4px solid #1b9bff; font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif; font-size: 12px; } #cssmenu > ul { *display: inline-block; } #cssmenu:after, #cssmenu ul:after { content: ''; display: block; clear: both; } #cssmenu ul { text-transform: uppercase; } #cssmenu ul ul { border-top: 4px solid #1b9bff; text-transform: none; min-width: 190px; } #cssmenu ul ul a { background: #1b9bff; color: #ffffff; border: 1px solid #0082e7; border-top: 0 none; line-height: 150%; padding: 16px 20px; font-size: 12px; } #cssmenu ul ul ul { border-top: 0 none; } #cssmenu ul ul li { position: relative; } #cssmenu ul ul li:first-child > a { border-top: 1px solid #0082e7; } #cssmenu ul ul li:hover > a { background: #4eb1ff; color: #ffffff; } #cssmenu ul ul li:last-child > a { -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; -moz-box-shadow: 0 1px 0 #1b9bff; -webkit-box-shadow: 0 1px 0 #1b9bff; box-shadow: 0 1px 0 #1b9bff; } #cssmenu ul ul li:last-child:hover > a { -moz-border-radius: 0 0 0 3px; -webkit-border-radius: 0 0 0 3px; border-radius: 0 0 0 3px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #cssmenu ul ul li.has-sub > a:after { content: '+'; position: absolute; top: 50%; right: 15px; margin-top: -8px; } #cssmenu ul li:hover > a, #cssmenu ul li.active > a { background: #1b9bff; color: #ffffff; } #cssmenu ul li.has-sub > a:after { content: '+'; margin-left: 5px; } #cssmenu ul li.last ul { left: auto; right: 0; } #cssmenu ul li.last ul ul { left: auto; right: 99.5%; } #cssmenu a { background: #333333; color: #CBCBCB; padding: 0 20px; } #cssmenu > ul > li > a { line-height: 48px; font-size: 12px; }
#cssmenu ul ul ul { border-top: 0 none; left:-190px; }
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)