|
|
| Line 45: |
Line 45: |
| | | | |
| | /* Begin Nav CSS */ | | /* Begin Nav CSS */ |
| − |
| |
| − | .nav, .nav ul {
| |
| − | margin: 0;
| |
| − | margin-bottom: 10px;
| |
| − | padding: 0;
| |
| − | list-style: none;
| |
| − | line-height: 1;
| |
| − | z-index: 9999999;
| |
| − | }
| |
| − |
| |
| − | /* The top navigation menu */
| |
| − | .nav {
| |
| − | /* Layout & positioning */
| |
| − | display: block;
| |
| − | position: relative;
| |
| − | width: 967px; /*1000px*/
| |
| − | height: 43px;
| |
| − | border-radius:4px;
| |
| − |
| |
| − | /* Background & effects */
| |
| − | background: rgba(129, 142, 94, .95); /* Background for Internet Explorer 9 and older browsers */
| |
| − |
| |
| − | }
| |
| − |
| |
| − | /* The link containers */
| |
| − | .nav>li {
| |
| − | display: block;
| |
| − | float:left;
| |
| − | position: relative;
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | /* The main navigation links */
| |
| − | .nav>li>a, .nav>li>p {
| |
| − | /* Layout & positioning */
| |
| − | display: block;
| |
| − | width: 159.1px; /* 198 */
| |
| − | padding: 15px 0px;
| |
| − |
| |
| − | /* Typography */
| |
| − | font-family: Arial, san-serif;
| |
| − | font-size: 20px;
| |
| − | font-weight: normal;
| |
| − | text-decoration: none;
| |
| − | color: rgba(255, 255, 255, .9);
| |
| − | text-shadow: 0 1px 0 #2a2a2a;
| |
| − | text-align: center;
| |
| − |
| |
| − | /* Chaning the background on hover with a smooth transition */
| |
| − | -webkit-transition: background .35s linear;
| |
| − | -moz-transition: background .35s linear;
| |
| − | -ms-transition: background .35s linear;
| |
| − | -o-transition: background .35s linear;
| |
| − | transition: background .35s linear;
| |
| − | }
| |
| − |
| |
| − | /* Centering dotted line dividers */
| |
| − | .leftbookend {
| |
| − | border-right: 1px dotted #393939;
| |
| − | }
| |
| − |
| |
| − | .rightbookend {
| |
| − | border-left: 1px dotted #595959;
| |
| − | }
| |
| − |
| |
| − | /* Chaning the background on hover */
| |
| − | .nav>li>a:hover, .nav>li>p:hover .nav>li:hover>a {
| |
| − | background: rgba(255, 255, 255, .9);
| |
| − | color: #000;
| |
| − | }
| |
| − |
| |
| − | .nav>li:first-child a, .nav>li:first-child p {
| |
| − | border-top-left-radius: 3px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | .arrow:hover {
| |
| − | -moz-transition-duration: 3000s;
| |
| − | -ms-transition-duration: 3000s;
| |
| − | -o-transition-duration: 3000s;
| |
| − | -webkit-transition-duration: 3000s;
| |
| − | transition-duration: 3000s;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* General styling for the submenus */
| |
| − | .nav ul {
| |
| − | display: block;
| |
| − | position: absolute;
| |
| − | left: -9999px;
| |
| − | text-align: center;
| |
| − | box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
| |
| − |
| |
| − | }
| |
| − |
| |
| − | /* Level 1 submenus */
| |
| − | .nav>li>ul {
| |
| − | cursor: pointer;
| |
| − | padding-top: 0px;
| |
| − | z-index: 200;
| |
| − | top: 43px;
| |
| − | }
| |
| − |
| |
| − | /* Making the level 1 submenu to appear on hover */
| |
| − | .nav>li:hover>ul {
| |
| − | left: 0px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* The submenu link containers */
| |
| − | .nav ul li {
| |
| − | position: relative;
| |
| − | display: block;
| |
| − |
| |
| − | /* Creating the slide effect. The list elements which contain the links have 0 height. On hover, they will expand */
| |
| − | height: 0px;
| |
| − | -webkit-transition: height .2s;
| |
| − | -moz-transition: height .2s;
| |
| − | -o-transition: height .2s;
| |
| − | -ms-transition: height .2s;
| |
| − | }
| |
| − |
| |
| − | /* Expanding the list elements which contain the links */
| |
| − | .nav li:hover>ul>li {
| |
| − | height: 24px;
| |
| − | }
| |
| − |
| |
| − | .nav>li:hover>ul>li:first-child {
| |
| − | height: 27px;
| |
| − | }
| |
| − |
| |
| − | .nav>li>ul>li:first-child>a {
| |
| − | border-top: 3px solid #fff;
| |
| − | }
| |
| − |
| |
| − | .nav>li>ul>li.dropdown:first-child>ul {
| |
| − | top: 3px;
| |
| − | }
| |
| − |
| |
| − | /* The links of the submenus */
| |
| − | .nav ul li a {
| |
| − | /* Layout */
| |
| − | display: block;
| |
| − | width: 127px; /* 169 */
| |
| − | padding: 6px 12px 6px 20px;
| |
| − |
| |
| − | /* Typography */
| |
| − | font-size: 13px;
| |
| − | color: #01406e;
| |
| − | font-family: Arial, san-serif;
| |
| − | text-decoration: none;
| |
| − | background: #f0f0f0;
| |
| − |
| |
| − | /* Every change to the links (background, color etc) will be made with a smooth transition */
| |
| − | -webkit-transition: all .2s;
| |
| − | -moz-transition: all .2s;
| |
| − | -ms-transition: all .2s;
| |
| − | -o-transition: all .2s;
| |
| − | transition: all .2s;
| |
| − | }
| |
| − |
| |
| − | .nav>li>ul>li:first-child>a::before {
| |
| − | content: "";
| |
| − | display: block;
| |
| − | position: absolute;
| |
| − | text-align: center;
| |
| − | width: 100%;
| |
| − | height: 12px;
| |
| − | background: transparent;
| |
| − | top: -8px;
| |
| − | left: 0;
| |
| − | z-index: 9999;
| |
| − | }
| |
| − |
| |
| − | /* The hover state of the links */
| |
| − | .nav ul li:hover>a, .nav ul li>a:hover, .nav ul li:hover>p, .nav ul li>p:hover {
| |
| − | background: #c8c8c8; /*e7e7e7 */
| |
| − | color: #000000;
| |
| − | }
| |
| − |
| |
| − | /* Changing the color of the arrow on hover */
| |
| − | .nav ul>.dropdown:hover>a::after, .nav ul>.dropdown>a:hover::after {
| |
| − | border-left-color: #fff;
| |
| − | }
| |
| − |
| |
| − | .nav>li>ul>li
| |
| − | {
| |
| − | margin-bottom: 0
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .nav>li:first-child:hover>ul
| |
| − | {
| |
| − | left:0px;
| |
| − | }
| |
| − |
| |
| − | .nav>li:last-child:hover>ul
| |
| − | {
| |
| − | left: 0px;
| |
| − | }
| |
| − |
| |
| − | .tableCSS
| |
| − | {
| |
| − | background-color:#ffffff;
| |
| − | width:1000px;
| |
| − | }
| |
| | | | |
| | /* END Nav CSS */ | | /* END Nav CSS */ |
