.Menu--dashboard { position: relative; } .Menu--dashboard > .Menu-tabList { line-height: 1; display: table; // The nav has the height og his children margin-bottom: -1px; // Allow tabs to merge with the submenu } .Menu--dashboard > .Menu-tabList ul { background: #fff; /*IE6 needs this*/ float: left; position: relative; } /* LEVEL1 NORMAL */ .Menu--dashboard > .Menu-tabList > li { background: #f1f1f1; float: left; list-style: none; z-index: 49; margin-right: -1px; border: 1px solid #ddd; border-bottom: 0; border-radius: 4px 4px 0 0; } .Menu--dashboard > .Menu-tabList a { color: #444; font-size: 18px; display: block; float: left; padding: 8px 27px 0; height: 25px; text-decoration: none; font-weight: normal; } /* LEVEL1 HOVER */ .Menu--dashboard > .Menu-tabList > li:hover, .Menu--dashboard > .Menu-tabList > li.sfHover { background: #fff; } .Menu--dashboard > .Menu-tabList > li:hover > a, .Menu--dashboard > .Menu-tabList > li.sfHover > a, .Menu--dashboard > .Menu-tabList > li.sfActive > a, .Menu--dashboard > .Menu-tabList a:hover { color: #e87500; } .Menu--dashboard > .Menu-tabList > li:hover > a { text-decoration: underline; } .Menu--dashboard > .Menu-tabList > li.sfHover > a { border-bottom: 1px solid #fff; } /* LEVEL2 NORMAL */ .Menu--dashboard > .Menu-tabList > li > ul { padding: 9px 0 5px 0; left: 0; top: -999em; position: absolute; min-height: 25px; width: 100%; background: none; } .Menu--dashboard > .Menu-tabList > li li { float: left; background: none; border: 0; text-align: center; } .Menu--dashboard > .Menu-tabList > li li > a { padding: 5px 15px; font-size: 14px; border: 0; float: none; display: inline-block; height: auto; background: none; color: #444; text-decoration: none; } /* LEVEL2 HOVER */ .Menu--dashboard > .Menu-tabList > li.sfHover > ul, .Menu--dashboard > .Menu-tabList > li:hover > ul { z-index: 1; top: 100%; opacity: 1; -webkit-transition: opacity 300ms ease-out 10ms; /* property duration timing-function delay */ -moz-transition: opacity 300ms ease-out 10ms; -o-transition: opacity 300ms ease-out 10ms; transition: opacity 300ms ease-out 10ms; } .Menu--dashboard > .Menu-tabList > li li:hover > a, .Menu--dashboard > .Menu-tabList > li li.sfHover > a { color: #e87500; } .Menu--dashboard > .Menu-tabList > li li.sfHover > a { font-weight: bold; text-decoration: none !important; } @media all and (max-width: 949px) { .nav { clear: right; } } @media all and (max-width: 749px) { .Menu--dashboard > .Menu-tabList a { padding-left: 8px; padding-right: 8px; } } @media all and (max-width: 549px) { .Menu--dashboard > ul.Menu-tabList > li.sfHover > a, .Menu--dashboard > ul.Menu-tabList > li.sfActive.sfHover > a { border-bottom: 0; } }