/*** ESSENTIAL STYLES ***/ .sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; } .sf-menu li { position: relative; } .sf-menu ul { position: absolute; display: none; top: 100%; left: 0; z-index: 202; } .sf-menu > li { float: left; } .sf-menu li:hover > ul, .sf-menu li.sfHover > ul { display: block; top: 100%; } .sf-menu a { display: block; position: relative; } .sf-menu ul.sub-menu ul { top: 0; left: 100%; } /*** DEMO SKIN ***/ .sf-menu { float: right; line-height: 80px; text-transform: uppercase; /*margin-bottom: 1em;*/ } .sf-menu ul.sub-menu { /*box-shadow: 2px 2px 6px rgba(0,0,0,.2);*/ min-width: 6em; /* allow long menu items to determine submenu width */ *width: 6em; /* no auto sub width for IE7, see white-space comment below */ /*border-radius: 8px;*/ line-height: 40px; } .sf-menu a { padding: 0 1.2em; text-decoration: none; zoom: 1; /* IE7 */ } /*.sf-menu a { color: #13a; }*/ .sf-menu li { /*background: #BDD2FF;*/ white-space: nowrap; /* no need for Supersubs plugin */ *white-space: normal; /* ...unless you support IE7 (let it wrap) */ -webkit-transition: background .2s; transition: background .2s; } .sf-menu ul li { /*background: #fff;*/ } .sf-menu ul ul li { /*background: #fff;*/ } .sf-menu li:hover, .sf-menu li.sfHover { /*background: #CFDEFF;*/ /* only transition out, not in */ -webkit-transition: none; transition: none; } .sf-menu li > ul { background: #fff; padding: 0px; -webkit-box-shadow: 1px 2px 0px 0px rgba(0,0,0,0.2); -moz-box-shadow: 1px 2px 0px 0px rgba(0,0,0,0.2); box-shadow: 1px 2px 0px 0px rgba(0,0,0,0.2); } .sf-menu li > ul.submenu li { border-bottom: 1px solid #eee; } .sf-menu li > ul li:last-child { border: none; }