Line 13: | Line 13: | ||
/* Wrapper for the menu */ | /* Wrapper for the menu */ | ||
− | #ddmenu | + | /* main menu |
− | { | + | ----------------------------*/ |
− | + | #ddmenu { | |
− | + | display: block; | |
− | + | font-family: "Arial Narrow", Helvetica, Arial, sans-serif; | |
− | + | text-align: center; /*Specify the alignment of the whole UL if UL is not width:100%;*/ | |
+ | letter-spacing: normal; | ||
} | } | ||
− | #ddmenu ul | + | |
− | { | + | #ddmenu ul { |
− | + | margin:0 auto; | |
− | + | padding: 0; | |
− | + | text-align: right; /* Alignment of each top-level menu items within the UL */ | |
− | + | width: 100%; | |
− | + | font-size: 0; | |
− | + | background: #205081; | |
− | + | display: inline-block; | |
− | + | list-style: none; | |
− | + | position: relative; | |
− | + | z-index: 999999990; | |
− | + | border:none; | |
− | + | border-radius:2px; | |
− | + | ||
} | } | ||
− | #ddmenu li | + | #ddmenu li { |
− | { | + | margin:0; |
− | + | padding:0; | |
− | + | font-size: 15px; | |
− | + | display: inline-block; | |
− | + | *display: inline; | |
− | + | zoom: 1; /*for IE6-7*/ | |
− | + | position: relative; | |
− | + | color: #EEE; | |
− | + | line-height: 50px; /*This determines the height of the menu*/ | |
− | + | vertical-align:middle; | |
− | + | transition: background-color 0.2s; | |
− | + | outline:none; | |
− | + | -moz-user-select:none; | |
− | + | -webkit-user-select: none; | |
− | + | -ms-user-select: none; | |
− | + | ||
} | } | ||
#ddmenu .full-width { | #ddmenu .full-width { | ||
− | + | position: static; | |
} | } | ||
− | #ddmenu .over | + | #ddmenu .over { |
− | { | + | color:#FFF; |
− | + | background-color: rgba(255,255,255,0.15); | |
− | + | background-color: #999 \9; /*fallback for old IE*/ | |
} | } | ||
#ddmenu .over.no-sub { | #ddmenu .over.no-sub { | ||
− | + | ||
} | } | ||
− | #ddmenu .top-heading | + | #ddmenu .top-heading { |
− | { | + | font-weight: bold; |
− | + | margin:0 22px; | |
− | + | color: inherit; | |
− | + | text-decoration: none; | |
− | + | display:inline-block; | |
− | + | outline: 0; | |
− | + | cursor: pointer; | |
− | + | ||
} | } | ||
Line 85: | Line 83: | ||
#ddmenu a, #ddmenu a:link, #ddmenu a:hover | #ddmenu a, #ddmenu a:link, #ddmenu a:hover | ||
{ | { | ||
− | + | color:inherit; | |
} | } | ||
#ddmenu a:hover | #ddmenu a:hover | ||
{ | { | ||
− | + | text-decoration:underline; | |
} | } | ||
#ddmenu a:focus | #ddmenu a:focus | ||
{ | { | ||
− | + | outline:1px dotted #09F; | |
} | } | ||
/* caret(arrow icon) */ | /* caret(arrow icon) */ | ||
− | #ddmenu .caret | + | #ddmenu .caret { |
− | { | + | color: inherit; |
− | + | left:-18px; | |
− | + | width: 0; | |
− | + | height: 0; | |
− | + | overflow: hidden; /*for IE6*/ | |
− | + | vertical-align: middle; | |
− | + | margin-bottom: 2px; | |
− | + | border-top: 4px solid; /*caret size is 4px now*/ | |
− | + | border-right: 4px solid transparent; | |
− | + | border-left: 4px solid transparent; | |
− | + | display: inline-block; | |
− | + | position:relative; | |
− | + | } | |
− | } | + | |
/* sub-menu layout | /* sub-menu layout | ||
----------------------------*/ | ----------------------------*/ | ||
− | #ddmenu .dropdown | + | #ddmenu .dropdown { |
− | { | + | width: auto; |
− | + | left: 0px; | |
− | + | color: #000000; | |
− | + | padding:0;margin:0;display:none;position:absolute;overflow:hidden; | |
− | + | top: 100%; | |
− | + | border:1px solid #CCC; | |
− | + | border-top:none; | |
− | + | border-radius:0 0 4px 4px; | |
− | + | box-shadow: 0px 4px 4px rgba(0,0,0,0.14); | |
− | + | ||
− | + | ||
} | } | ||
#ddmenu .full-width .dropdown { | #ddmenu .full-width .dropdown { | ||
− | + | width: 100%; | |
− | + | padding: 0; | |
− | + | margin: 0; | |
} | } | ||
#ddmenu .offset300 { | #ddmenu .offset300 { | ||
− | + | left: -300px;right:auto; | |
} | } | ||
#ddmenu .right-aligned { | #ddmenu .right-aligned { | ||
− | + | left: auto; | |
− | + | right: 0px; | |
} | } | ||
− | #ddmenu .over .dropdown | + | #ddmenu .over .dropdown { |
− | { | + | display: block; |
− | + | ||
} | } | ||
#ddmenu .dd-inner { | #ddmenu .dd-inner { | ||
− | + | text-align: center; | |
− | + | padding: 20px; | |
− | + | margin:0px; | |
− | + | background-color: #EEEEEE; | |
− | + | white-space: nowrap; | |
− | + | font-size: 13px; | |
} | } | ||
#ddmenu ul ul | #ddmenu ul ul | ||
{ | { | ||
− | + | margin:0;padding:0;text-align:left;width:auto;background:none;border:none;display:block;position:static;z-index:0;border-radius:0; | |
} | } | ||
#ddmenu ul ul li | #ddmenu ul ul li | ||
{ | { | ||
− | + | font-size:13px; | |
− | + | padding:6px 0; /*It determines the line height*/ | |
− | + | color:inherit; | |
− | + | line-height:1; | |
− | + | margin:0;display:block;position:static;background:none;border:none;transition:none;border-radius:0; | |
} | } | ||
Line 177: | Line 171: | ||
----------------------------*/ | ----------------------------*/ | ||
− | #ddmenu .dropdown a | + | #ddmenu .dropdown a { |
− | { | + | color: #333333; |
− | + | line-height:1; | |
− | + | text-decoration:none; | |
− | + | transition:color 0.4s; | |
− | + | ||
} | } | ||
− | #ddmenu .dropdown a:hover, #ddmenu .dropdown a:focus | + | #ddmenu .dropdown a:hover, #ddmenu .dropdown a:focus { |
− | { | + | text-decoration: underline; |
− | + | color: #0099FF; | |
− | + | ||
} | } | ||
/* blocks within the sub-menu | /* blocks within the sub-menu | ||
-----------------------------*/ | -----------------------------*/ | ||
− | #ddmenu .column | + | #ddmenu .column { |
− | { | + | text-align: left; |
− | + | vertical-align: top; /*or middle*/ | |
− | + | display: inline-block; | |
− | + | *display: inline;*zoom: 1; | |
− | + | white-space:normal; | |
− | + | width:auto;min-width:200px; | |
− | + | padding:0 30px; | |
− | + | border-right:1px solid #999; | |
− | + | ||
} | } | ||
− | #ddmenu .dd-inner ul:last-child | + | #ddmenu .dd-inner ul:last-child { |
− | { | + | border-right: none; |
− | + | ||
} | } | ||
− | #ddmenu h3 { | + | #ddmenu .column h3 { |
− | + | font-weight: 500; | |
− | + | line-height: 1.1; | |
− | + | margin-top: 12px; | |
− | + | margin-bottom: 8px; | |
− | + | font-size: 24px; | |
} | } | ||
− | #ddmenu | + | #ddmenu li { |
+ | border-left:1px solid #2e6fb2; | ||
+ | border-right:1px solid #14314f; } | ||
+ | #ddmenu li:first-child {border-left:none;} | ||
+ | #ddmenu li:last-child {border-right:none;} | ||
#ddmenuLink {display:none;} | #ddmenuLink {display:none;} |
Revision as of 15:02, 24 June 2016