rob@100: #nav { rob@100: margin: 0; rob@100: padding: 1px 1px 0; rob@100: background: #7d7d7d; rob@100: line-height: 100%; rob@100: border-radius: 1em; rob@100: -webkit-border-radius: 1em; rob@100: -moz-border-radius: 1em; rob@100: -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4); rob@100: -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4); rob@100: position:absolute; rob@100: left: 0px; rob@100: bottom: -50px; rob@100: } rob@100: #nav li { rob@100: margin: 0 5px; rob@100: padding: 0 0 8px; rob@100: float: left; rob@100: position: relative; rob@100: list-style: none; rob@100: } rob@100: rob@100: rob@100: /* main level link */ rob@100: #nav a { rob@100: font-weight: bold; rob@100: color: #e7e5e5; rob@100: text-decoration: none; rob@100: display: block; rob@100: padding: 8px 20px; rob@100: margin: 0; rob@100: rob@100: -webkit-border-radius: 1.6em; rob@100: -moz-border-radius: 1.6em; rob@100: rob@100: text-shadow: 0 1px 1px rgba(0,0,0, .3); rob@100: } rob@100: #nav a:hover { rob@100: background: #000; rob@100: color: #fff; rob@100: } rob@100: rob@100: /* main level link hover */ rob@100: #nav .current a, #nav li:hover > a { rob@100: background: #666; rob@100: color: #444; rob@100: border-top: solid 1px #f8f8f8; rob@100: rob@100: -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2); rob@100: -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2); rob@100: box-shadow: 0 1px 1px rgba(0,0,0, .2); rob@100: rob@100: text-shadow: 0 1px 0 rgba(255,255,255, 1); rob@100: } rob@100: rob@100: /* sub levels link hover */ rob@100: #nav ul li:hover a, #nav li:hover li a { rob@100: background: none; rob@100: border: none; rob@100: color: #666; rob@100: rob@100: -webkit-box-shadow: none; rob@100: -moz-box-shadow: none; rob@100: } rob@100: #nav ul a:hover { rob@100: background: #0078ff !important; rob@100: color: #fff !important; rob@100: rob@100: -webkit-border-radius: 0; rob@100: -moz-border-radius: 0; rob@100: rob@100: text-shadow: 0 1px 1px rgba(0,0,0, .1); rob@100: } rob@100: rob@100: /* dropdown */ rob@100: #nav li:hover > ul { rob@100: display: block; rob@100: } rob@100: rob@100: /* level 2 list */ rob@100: #nav ul { rob@100: display: none; rob@100: rob@100: margin: 0; rob@100: padding: 0; rob@100: width: 185px; rob@100: position: absolute; rob@100: top: -55px; rob@100: left: 0; rob@100: background: #ddd; rob@100: border: solid 1px #b4b4b4; rob@100: rob@100: -webkit-border-radius: 10px; rob@100: -moz-border-radius: 10px; rob@100: border-radius: 10px; rob@100: rob@100: -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3); rob@100: -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3); rob@100: box-shadow: 0 1px 3px rgba(0,0,0, .3); rob@100: } rob@100: #nav ul li { rob@100: float: none; rob@100: margin: 0; rob@100: padding: 0; rob@100: } rob@100: rob@100: #nav ul a { rob@100: font-weight: normal; rob@100: text-shadow: 0 1px 0 #fff; rob@100: } rob@100: rob@100: /* level 3+ list */ rob@100: #nav ul ul { rob@100: left: 181px; rob@100: top: -3px; rob@100: } rob@100: rob@100: /* rounded corners of first and last link */ rob@100: #nav ul li:first-child > a { rob@100: -webkit-border-top-left-radius: 9px; rob@100: -moz-border-radius-topleft: 9px; rob@100: rob@100: -webkit-border-top-right-radius: 9px; rob@100: -moz-border-radius-topright: 9px; rob@100: } rob@100: #nav ul li:last-child > a { rob@100: -webkit-border-bottom-left-radius: 9px; rob@100: -moz-border-radius-bottomleft: 9px; rob@100: rob@100: -webkit-border-bottom-right-radius: 9px; rob@100: -moz-border-radius-bottomright: 9px; rob@100: } rob@100: rob@100: /* clearfix */ rob@100: #nav:after { rob@100: content: "."; rob@100: display: block; rob@100: clear: both; rob@100: visibility: hidden; rob@100: line-height: 0; rob@100: height: 0; rob@100: } rob@100: #nav { rob@100: display: inline-block; rob@100: } rob@100: html[xmlns] #nav { rob@100: display: block; rob@100: } rob@100: rob@100: * html #nav { rob@100: height: 1%; rob@100: }