ãƒ–ãƒãƒƒã‚¯ãƒŠãƒ“ã‚²ãƒ¼ã‚·ãƒ§ãƒ³ï¼ˆãƒ‰ãƒãƒƒãƒ—ãƒ€ã‚¦ãƒ³ï¼‰

<div class="menu">
                <ul class="sf-menu clearfix">
                    <li><a href="#">ç¬¬ä¸€éšŽå±¤</a></li>
                    <li>
                        <a href="#">ç¬¬ä¸€éšŽå±¤</a>
                        <ul class="sub-menu">
                            <li><a href="#">ç¬¬äºŒéšŽå±¤</a></li>
                            <li>
                                <a href="#">ç¬¬äºŒéšŽå±¤</a>
                                <ul class="sub-menu">
                                    <li><a href="#">ç¬¬ä¸‰éšŽå±¤</a></li>
                                    <li>
                                        <a href="#">ç¬¬ä¸‰éšŽå±¤</a>
                                        <ul class="sub-menu">
                                            <li><a href="#">ç¬¬å››éšŽå±¤</a></li>
                                            <li><a href="#">ç¬¬å››éšŽå±¤</a></li>
                                            <li><a href="#">ç¬¬å››éšŽå±¤</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">ç¬¬ä¸‰éšŽå±¤</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">ç¬¬äºŒéšŽå±¤</a>
                                <ul class="sub-menu">
                                    <li><a href="#">ç¬¬ä¸‰éšŽå±¤</a></li>
                                    <li><a href="#">ç¬¬ä¸‰éšŽå±¤</a></li>
                                    <li><a href="#">ç¬¬ä¸‰éšŽå±¤</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">ç¬¬ä¸€éšŽå±¤</a></li>
                    <li><a href="#">ç¬¬ä¸€éšŽå±¤</a></li>
                </ul>
            </div>
        </nav>
    </header>

html, body {
	margin:0;
	padding:0;
}
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	font-weight:normal;
	font-style:normal;
	font-size:100%;
	line-height:1;
	font-family:inherit;
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display:block; }
audio[controls], canvas, video { display:inline-block; *display:inline;
*zoom:1;
}
.sans-serif { font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; }
.serif { font-family:"Cambria, Georgia, Times, " Times New Roman; }
.monospace { font-family:"Monaco", Courier New, monospace; }
.clearfix { zoom:1; }
.clearfix:before, .clearfix:after {
	content:"\0020";
	display:block;
	height:0;
	overflow:hidden;
}
.clearfix:after { clear:both; }
html {
	overflow-y:scroll;
	background:#ffffff;
	font-size:62.5%;
}
body {
	margin:0 auto;
	padding:0;
	width:90%;
	font-size:16px;
	font-size:1.6rem;
	font-family:"Cambria, Georgia, Times, " Times New Roman;
	color:#282828;
	background-color:transparent;
}
button, input, select, textarea {
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#404040;
}
h1, h2, h3, h4, h5, h6 {
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:bold;
}
h1 {
	margin:0.75em 0;
	font-size:48px;
	font-size:4.8rem;
	line-height:1.2;
}
h2 {
	margin-bottom:0.75em;
	font-size:32px;
	font-size:3.2rem;
	line-height:1.2;
}
h3 {
	margin-bottom:1em;
	font-size:24px;
	font-size:2.4rem;
	line-height:1.3;
}
h4 {
	margin-bottom:1em;
	font-size:18px;
	font-size:1.8rem;
	line-height:1.25;
}
h5 {
	margin-bottom:1.5em;
	font-size:16px;
	font-size:1.6rem;
}
h6 {
	font-size:16px;
	font-size:1.6rem;
}
p, ol, ul, dl, address {
	margin-bottom:1.5em;
	font-size:16px;
	font-size:1.6rem;
}
p {
	hyphens:auto;
	text-align:justify;
}
ul, ol {
	margin:0 0 1.5em -24px;
	padding:0 0 0 24px;
}
li ul, li ol {
	margin:0;
	font-size:16px;
	font-size:1.6rem;
}
dl, dd { margin-bottom:1.5em; }
dt { font-weight:normal; }
blockquote {
	margin:0 0 1.5em -24px;
	padding-left:24px;
	border-left:1px solid #bfbfbf;
	font-style:italic;
}
blockquote:before, blockquote:after, q:before, q:after {
	content:'';
	content:none;
}
abbr[title] {
	border-bottom:1px dotted;
	cursor:help;
}
b, strong { font-weight:bold; }
dfn { font-style:italic; }
hr {
	display:block;
	margin:1em 0;
	padding:0;
	height:1px;
	border:0;
	border-top:1px solid #bfbfbf;
}
ins {
	background-color:#c3d9e6;
	color:#000000;
	text-decoration:none;
}
mark {
	background-color:#c3d9e6;
	color:#000000;
	font-style:italic;
	font-weight:bold;
}
pre, code, kbd, samp {
	font-family:"Monaco", Courier New, monospace;
	font-size:14px;
	font-size:1.4rem;
	line-height:1.5em;
}
pre {
	white-space:pre;
	white-space:pre-wrap;
	word-wrap:break-word;
}
q { quotes:none; }
q:before, q:after {
	content:"";
	content:none;
}
small {
	font-size:14px;
	font-size:1.4rem;
}
sub, sup {
	font-size:12px;
	font-size:1.2rem;
	line-height:0;
	position:relative;
	vertical-align:baseline;
}
sup { top:-0.5em; }
sub { bottom:-0.25em; }
a { color:#013568; }
a:visited { color:#011b35; }
a:hover { color:#011b35; }
a:focus {
	outline:thin dotted;
	color:#011b35;
}
a:hover, a:active { outline:0; }
figure { margin-bottom:1.5em; }
figure img, figure object, figure embed {
	margin-bottom:0.75em;
	max-width:100%;
}
figcaption {
	display:block;
	font-weight:normal;
}
img { border:0; }
svg:not(:root) {
overflow:hidden;
}
table {
	border-collapse:collapse;
	border-spacing:0;
	margin-bottom:1.5em;
	width:100%;
	font-size:14px;
	font-size:1.4rem;
}
th, td, caption { padding:0.1875em 10px 0.1875em 5px; }
tfoot { font-style:italic; }
caption { background-color:transparent; }
tbody tr:nth-child(odd) td {
background-color:#c3d9e6;
}
form { margin:0; }
fieldset {
	margin-bottom:1.5em;
	padding:0;
	border-width:0;
}
legend {
*margin-left:-7px;
	padding:0;
	border-width:0;
}
label {
	font-weight:normal;
	cursor:pointer;
}
button, input, select, textarea {
	font-size:12px;
	font-size:1.2rem;
	margin:0;
	vertical-align:baseline;
*vertical-align:middle;
}
button, input { line-height:normal; *overflow:visible;
}
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor:pointer; }
input[type="checkbox"], input[type="radio"] { box-sizing:border-box; }
input[type="search"] { box-sizing:content-box; }
button::-moz-focus-inner, input::-moz-focus-inner {
padding:0;
border:0;
}
textarea {
	overflow:auto;
	vertical-align:top;
}
html {
	-webkit-overflow-scrolling:touch;
	-webkit-tap-highlight-color:#c3d9e6;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
}
::-webkit-selection {
background:#e6e6e6;
color:#fafafa;
text-shadow:none;
}
::-moz-selection {
background:#7bacc8;
color:#c8977b;
text-shadow:none;
}
::selection {
background:#7bacc8;
color:#c8977b;
text-shadow:none;
}
button, input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance:button; }
::-webkit-input-placeholder {
font-size:14px;
font-size:1.4rem;
}
input:-moz-placeholder {
font-size:14px;
font-size:1.4rem;
}
.ie7 img, .iem7 img { -ms-interpolation-mode:bicubic; }
input[type="checkbox"], input[type="radio"] { box-sizing:border-box; }
input[type="search"] {
	-webkit-box-sizing:content-box;
	-moz-box-sizing:content-box;
}
button::-moz-focus-inner, input::-moz-focus-inner {
padding:0;
border:0;
}
p {
	-webkit-hyphens:auto;
	-webkit-hyphenate-character:"\2010";
	-webkit-hyphenate-limit-after:1;
	-webkit-hyphenate-limit-before:3;
	-moz-hyphens:auto;
}
.ir {
	display:block;
	overflow:hidden;
	background-repeat:no-repeat;
	text-align:left;
	text-indent:-999em;
	direction:ltr;
}
.ir br { display:none; }
.hidden {
	display:none;
	visibility:hidden;
}
.visuallyhidden {
	position:absolute;
	margin:-1px;
	padding:0;
	height:1px;
	width:1px;
	overflow:hidden;
	border:0;
	clip:rect(0 0 0 0);
}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
	position:static;
	margin:0;
	height:auto;
	width:auto;
	overflow:visible;
	clip:auto;
}
.invisible { visibility:hidden; }
@media print {
* {
	background:transparent !important;
	color:black !important;
	text-shadow:none !important;
	filter:none !important;
	-ms-filter:none !important;
}
@page {
margin:0.5cm;
}
h2, h3 {
	orphans:3;
	widows:3;
	page-break-after:avoid;
}
p {
	orphans:3;
	widows:3;
}
pre, blockquote {
	border:1px solid #808080;
	page-break-inside:avoid;
}
abbr[title]:after { content:" (" attr(title) ")"; }
a, a:visited {
	color:#000000 !important;
	text-decoration:underline;
}
a[href]:after { content:" (" attr(href) ")"; }
a[href^="javascript:"]:after, a[href^="#"]:after {
content:"";
}
img {
	max-width:100% !important;
	page-break-inside:avoid;
}
thead { display:table-header-group; }
tr { page-break-inside:avoid; }
.ir a:after { content:""; }
}

.content{
    margin: 24px auto;
}

header h1{
    font-size: 26px;
}

/* =Navigation
-------------------------------------------------------------- */
/* clip skip link for screen readers */
.skip-link {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
}
#access {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    overflow:visible;
    z-index:100;
}
/* style the main menu 8*/
.sf-menu{
    border: 1px solid #000;
    border-top: none;
}
/* get rid of padding and margin off all ul's (not sure about using * here, could be better) */
.sf-menu, .sf-menu * {
    margin:0;
    padding:0;
    list-style:none;
}
/* position all dropdowns off screen */
.sf-menu ul {
    position:absolute;
    top:-999em;
}
/* style the main nav list items */
.sf-menu li {
    background: #000;
    background-image: url('../img/menuBg.png'), linear-gradient(bottom, rgb(36,35,36) 0%, rgb(0,0,0) 100%);
    background-image: url('../img/menuBg.png'), -o-linear-gradient(bottom, rgb(36,35,36) 0%, rgb(0,0,0) 100%);
    background-image: url('../img/menuBg.png'), -moz-linear-gradient(bottom, rgb(36,35,36) 0%, rgb(0,0,0) 100%);
    background-image: url('../img/menuBg.png'), -webkit-linear-gradient(bottom, rgb(36,35,36) 0%, rgb(0,0,0) 100%);
    background-image: url('../img/menuBg.png'), -ms-linear-gradient(bottom, rgb(36,35,36) 0%, rgb(0,0,0) 100%);
    background-image: url('../img/menuBg.png'), -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(36,35,36)), color-stop(1, rgb(0,0,0)));
    background-repeat: repeat-x;
    border-top: 1px solid #242324;
    clear: left;
    float:left;
    position:relative;
    width: 100%;
}
/* change the main nav list items on hover */ 
.sf-menu li:hover {
    background-image: url('../img/menuBg.png'); 
    visibility:inherit; /* fixes IE7 'sticky bug' */
}
/* style all the links */
.sf-menu a {
    font-size: .8em;
    color: #fff;
    display:block;
    padding: 12px 0;
    text-decoration: none;
    text-indent: 12px;
}
/* style the first drop */
.sf-menu li li, .sf-menu li li:hover{
    background: none;
    background-image: none;
}
/* add a larger text indent for the first drop links */
.sf-menu li li a{
    text-indent: 24px;
}
/* add a larger text indent for the second drop links */
.sf-menu li li li a{
    text-indent: 36px;
}
/* add a larger text indent for the third drop links */
.sf-menu li li li li a{
    text-indent: 48px;
}
/* position first drop */
.sf-menu li:hover ul {
    top:auto; /* match top ul list item height */
    position:relative;
}
/* make sure second drop is still off screen */
ul.sf-menu li:hover li ul {
    position: absolute;
    top:-999em;
}
/* position second drop */
ul.sf-menu li li:hover ul {
    top:auto;
    position:relative;
}
/* make sure third drop is still off screen */
ul.sf-menu li li:hover li ul {
    position: absolute;
    top:-999em;
}
/* position third drop */
ul.sf-menu li li li:hover ul {
    top:auto;
    position:relative;
}
@media only screen and (min-width: 480px) {
}
@media only screen and (min-width: 600px) {
    /* set height so content isn't pushed down */
    #access{
        float: left;
        height: 36px;
        width: 100%;
    }
    /* set height so content isn't pushed down add z-index to keep drops above content */
    .sf-menu{
        height: 36px;
        z-index: 100;
    }
    /* restyle so main links are horizontally aligned */
    .sf-menu li {
        clear: none;
        width: 25%; /* this will need to be adjusted for your needs */
    }
    /* new style for drop list items */
    .sf-menu li li{
        background: #000;
        background-image: url('../img/menuBg.png'), linear-gradient(bottom, rgb(36,35,36) 0%, rgb(0,0,0) 100%);
        background-image: url('../img/menuBg.png'), -o-linear-gradient(bottom, rgb(36,35,36) 0%, rgb(0,0,0) 100%);
        background-image: url('../img/menuBg.png'), -moz-linear-gradient(bottom, rgb(36,35,36) 0%, rgb(0,0,0) 100%);
        background-image: url('../img/menuBg.png'), -webkit-linear-gradient(bottom, rgb(36,35,36) 0%, rgb(0,0,0) 100%);
        background-image: url('../img/menuBg.png'), -ms-linear-gradient(bottom, rgb(36,35,36) 0%, rgb(0,0,0) 100%);
        background-image: url('../img/menuBg.png'), -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(36,35,36)), color-stop(1, rgb(0,0,0)));
        background-repeat: repeat-x;
        clear: left;
        width: 100%;
    }
    /* reset text indent on all drop a tags and set the width to 100% */
    .sf-menu li li a, .sf-menu li li li a, .sf-menu li li li li a{
        text-indent: 12px;
        width: 100%;
    }
    /* reposision and style the first drop */
    .sf-menu li:hover ul{
        background: #000;
        left: auto;
        position: absolute;
        top: -1;
        width: 100%;
        z-index: 100;
    }
    /* reposision and style the second drop */
    ul.sf-menu li li:hover ul{
        background: #000;
        position: absolute;
        top: -1px;
        left:100%;
    }
    /* reposision and style the third drop */
    ul.sf-menu li li li:hover ul{
        background: #000;
        position: absolute;
        top: -1px;
        left:100%;
    }
}
@media only screen and (min-width: 768px) {
    header h1{
    font-size: 30px;
}
}
@media only screen and (min-width: 992px) {
    header h1{
        font-size: 36px;
    }
    /* bigger screen bigger nav */
    #access{
        height: 50px;
    }
    /* bigger screen bigger nav */
    .sf-menu{
        height: 50px;
    }
    /* bigger screen bigger font size and padding */
    .sf-menu a {
        font-size: 1em;
        padding: 17px 0;
    }
}
@media only screen and (min-width: 1382px) {
    /* move the header to the left side of the screen */
    header{
        float: left;
        margin: 0 2% 0 0;
        width: 20%;
    }
    header h1{
        font-size: 45px
    }
    .content{
        float: left;
        width: 78%;
    }
    #access, .sf-menu{
        height: auto;
    }
    .sf-menu li {
        clear: left;
        width: 100%;
    }
    /* reposition the first drop */
    .sf-menu li:hover ul{
        left: 100%;
        top: -1px;
        position: absolute;
    }
    
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
}