如何将导航栏移动到另一个位置

Question

所以...我之前对菜单栏有疑问，并且已经正确修复，但是我仍然需要帮助（这是我第一次制作自己的网页）如何将导航栏移动到另一个位置？ 导航栏应该在右侧而不是左侧，这是代码：

 document.getElementById('menu').addEventListener("click", function() { document.getElementById('header').classList.toggle('nav-is-open'); }); 

 html, body { height: 100%; margin: 0; padding: 0; width: 100%; } body { display: table; } body { background-image: url("https://cdn.shopify.com/s/files/1/0862/7604/files/Sugar_Paper-Wedding_Agenda-Blog-2_1024x1024.jpg?v=1487113518") } body { background-size: cover; } .my-block { text-align: center; display: table-cell; vertical-align: middle; } h1 { font-family: raleway; letter-spacing: 3px; color: Salmon; } h4 { font-family: raleway; font-weight: 100; letter-spacing: 1.5px; color: DarkGray; line-height: 200% } button { font-family: raleway; color: salmon; letter-spacing: 2px; } .button { background-color: darksalmon; border: none; color: white; padding: 16px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; border: 2px solid #E9967A; margin: 10px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; } .button:hover { background-color: transparent; color: black; border: 2px solid #FA8072; } .square { border: solid 21px #fffff; width: 30px; height: 30px; } span { font-family: raleway; font-weight: 300; } li { font-family: raleway; } text { font-family: montserrat; } header { position: fixed; top: 0; left: 0; width: 100%; height: 0px; z-index: 10; } header.non-fixed { position: absolute; } header .header-inner { padding: 0px 40px; height: 0; margin-top: 60px; margin-bottom: 60px; } header .header-inner.wrapper { padding: 0; } #menu { position: relative; z-index: 10; } .open-nav { display: block; height: 30px; float: right; position: relative; z-index: 10; margin-left: 20px; } .open-nav .hamburger { display: inline-block; width: 22px; height: 2px; background-color: darksalmon; position: relative; top: -3px; transition: background 0.4s ease; } .open-nav .hamburger:before, .open-nav .hamburger:after { content: ''; width: 100%; height: 100%; position: absolute; background-color: darksalmon; right: 0; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform 0.4s, background 0.4s ease, right .2s ease; -webkit-transition: -webkit-transform 0.4s ease, background 0.4s, right .2s ease; -moz-transition: -moz-transform 0.4s, background 0.4s ease, right .2s ease; -o-transition: -o-transform 0.4s, background 0.4s ease, right .2s ease; -ms-transition: -ms-transform 0.4s, background 0.4s ease, right .2s ease; } .open-nav .hamburger:before { right: 2px; -webkit-transform: translateY(-6px) rotate(0deg); -moz-transform: translateY(-6px) rotate(0deg); -ms-transform: translateY(-6px) rotate(0deg); -o-transform: translateY(-6px) rotate(0deg); transform: translateY(-6px) rotate(0deg); } .open-nav .hamburger:after { right: 5px; -webkit-transform: translateY(6px) rotate(0deg); -moz-transform: translateY(6px) rotate(0deg); -ms-transform: translateY(6px) rotate(0deg); -o-transform: translateY(6px) rotate(0deg); transform: translateY(6px) rotate(0deg); } .open-nav:hover .hamburger:before, .open-nav:hover .hamburger:after { right: 0px; } .open-nav .text { width: 65px; text-align: right; display: inline-block; font-family: 'raleway'; font-weight: 700; font-size: 14px; line-height: 30px; text-transform: uppercase; color: darksalmon; letter-spacing: 0.12em; transition: width 0.4s ease, opacity 0.2s ease 0.3s, color 0.4s; } /* open nav state */ header.nav-is-open #menu .open-nav .hamburger { background-color: transparent; transition: background 0.1s ease; } header.nav-is-open #menu .open-nav .hamburger:before { width: 70%; right: 0px; -webkit-transform: translateY(0) rotate(45deg); -moz-transform: translateY(0) rotate(45deg); -ms-transform: translateY(0) rotate(45deg); -o-transform: translateY(0) rotate(45deg); transform: translateY(0) rotate(45deg); background-color: #0d0d0d; } header.nav-is-open #menu .open-nav .hamburger:after { width: 70%; right: 0px; -webkit-transform: translateY(0) rotate(-45deg); -moz-transform: translateY(0) rotate(-45deg); -ms-transform: translateY(0) rotate(-45deg); -o-transform: translateY(0) rotate(-45deg); transform: translateY(0) rotate(-45deg); background-color: #0d0d0d; } header.nav-is-open #menu .open-nav .text { transition: width 0.4s ease, opacity 0.2s ease; width: 0px; opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } nav#main-nav { float: left; visibility: hidden; } header.nav-is-open #menu nav#main-nav { visibility: visible; } nav#main-nav ul { list-style: none; text-align: center; margin: 0 auto; position: relative; z-index: 10; } nav#main-nav ul>li { margin: 0 0 0 20px; padding: 0; display: inline-block; position: relative; transition: top 0.3s ease 0.4s, opacity 0.3s ease; top: -5px; opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } #menu { position: relative; z-index: 10; } .open-nav { display: block; height: 30px; float: right; position: relative; z-index: 10; margin-left: 20px; } .open-nav .hamburger { display: inline-block; width: 22px; height: 2px; background-color: #0d0d0d; position: relative; top: -3px; transition: background 0.4s ease; } .open-nav .hamburger:before, .open-nav .hamburger:after { content: ''; width: 100%; height: 100%; position: absolute; background-color: #0d0d0d; right: 0; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform 0.4s, background 0.4s ease, right .2s ease; -webkit-transition: -webkit-transform 0.4s ease, background 0.4s, right .2s ease; -moz-transition: -moz-transform 0.4s, background 0.4s ease, right .2s ease; -o-transition: -o-transform 0.4s, background 0.4s ease, right .2s ease; -ms-transition: -ms-transform 0.4s, background 0.4s ease, right .2s ease; } .open-nav .hamburger:before { right: 2px; -webkit-transform: translateY(-6px) rotate(0deg); -moz-transform: translateY(-6px) rotate(0deg); -ms-transform: translateY(-6px) rotate(0deg); -o-transform: translateY(-6px) rotate(0deg); transform: translateY(-6px) rotate(0deg); } .open-nav .hamburger:after { right: 5px; -webkit-transform: translateY(6px) rotate(0deg); -moz-transform: translateY(6px) rotate(0deg); -ms-transform: translateY(6px) rotate(0deg); -o-transform: translateY(6px) rotate(0deg); transform: translateY(6px) rotate(0deg); } .open-nav:hover .hamburger:before, .open-nav:hover .hamburger:after { right: 0px; } .open-nav .text { width: 65px; text-align: right; display: inline-block; font-family: 'raleway'; font-weight: 700; font-size: 14px; line-height: 30px; text-transform: uppercase; color: #0d0d0d; letter-spacing: 0.12em; transition: width 0.4s ease, opacity 0.2s ease 0.3s, color 0.4s; } /* open nav state */ header.nav-is-open #menu .open-nav .hamburger { background-color: transparent; transition: background 0.1s ease; } header.nav-is-open #menu .open-nav .hamburger:before { width: 70%; right: 0px; -webkit-transform: translateY(0) rotate(45deg); -moz-transform: translateY(0) rotate(45deg); -ms-transform: translateY(0) rotate(45deg); -o-transform: translateY(0) rotate(45deg); transform: translateY(0) rotate(45deg); background-color: #0d0d0d; } header.nav-is-open #menu .open-nav .hamburger:after { width: 70%; right: 0px; -webkit-transform: translateY(0) rotate(-45deg); -moz-transform: translateY(0) rotate(-45deg); -ms-transform: translateY(0) rotate(-45deg); -o-transform: translateY(0) rotate(-45deg); transform: translateY(0) rotate(-45deg); background-color: #0d0d0d; } header.nav-is-open #menu .open-nav .text { transition: width 0.4s ease, opacity 0.2s ease; width: 0px; opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } nav#main-nav { float: left; visibility: hidden; } header.nav-is-open #menu nav#main-nav { visibility: visible; } nav#main-nav ul { list-style: none; text-align: center; margin: 0 auto; position: relative; z-index: 10; } nav#main-nav ul>li { margin: 0 0 0 20px; padding: 0; display: inline-block; position: relative; transition: top 0.3s ease 0.4s, opacity 0.3s ease; top: -5px; opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } nav#main-nav ul>li:first-child { margin: 0; } header.nav-is-open #menu nav#main-nav ul>li:nth-child(2n) { transition: top 0.3s ease 0.5s, opacity 0.3s ease 0.5s; } header.nav-is-open #menu nav#main-nav ul>li:nth-child(3n) { transition: top 0.3s ease 0.6s, opacity 0.3s ease 0.6s; } header.nav-is-open #menu nav#main-nav ul>li:nth-child(4n) { transition: top 0.3s ease 0.7s, opacity 0.3s ease 0.7s; } header.nav-is-open #menu nav#main-nav ul>li:nth-child(5n) { transition: top 0.3s ease 0.8s, opacity 0.3s ease 0.8s; } header.nav-is-open #menu nav#main-nav ul>li:nth-child(6n) { transition: top 0.3s ease 0.9s, opacity 0.3s ease 0.9s; } header.nav-is-open #menu nav#main-nav ul>li:nth-child(7n) { transition: top 0.3s ease 1.0s, opacity 0.3s ease 1.0s; } header.nav-is-open #menu nav#main-nav ul>li:nth-child(8n) { transition: top 0.3s ease 1.1s, opacity 0.3s ease 1.1s; } header.nav-is-open #menu nav#main-nav ul>li { top: 0; opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; transition: top 0.3s ease 0.4s, opacity 0.3s ease 0.4s; } nav#main-nav ul li>a { display: inline-block; font-family: 'raleway'; font-weight: 700; font-size: 14px; line-height: 30px; text-transform: uppercase; color: #0d0d0d; letter-spacing: 0.12em; transition: all 100ms ease; } nav#main-nav>ul>li:hover>a, nav#main-nav>ul>li.current-menu-item>a { color: #ea4452 !important; } /* submenu */ nav#main-nav ul li>ul.submenu { position: absolute; top: 20px; right: -20px; width: 240px; padding-top: 20px; opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; visibility: hidden; transition: all 400ms ease; } nav#main-nav ul li:hover>ul.submenu { opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; visibility: visible; top: 30px; transition: all 400ms ease; } nav#main-nav ul li>ul.submenu>li { margin: 0; padding: 2px 20px 2px 20px; display: block; position: relative; text-align: right; background: #0d0d0d; } nav#main-nav ul li>ul.submenu>li:first-child { padding-top: 15px; } nav#main-nav ul li>ul.submenu>li:last-child { padding-bottom: 15px; } nav#main-nav ul li>ul.submenu>li a { color: #ffffff; font-weight: 400; font-size: 13px; line-height: 18px; opacity: 0.6; filter: alpha(opacity=60); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; } nav#main-nav ul li>ul.submenu>li a em, nav#main-nav ul li>ul.submenu>li ai { font-size: 0.9em; text-transform: none; letter-spacing: 0.05em; } nav#main-nav ul li>ul.submenu>li a:hover, nav#main-nav ul li>ul.submenu>li.current-menu-item>a { opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=7-100)"; } /* menu color switch */ header:not(.hero-invisible) .menu-light .open-nav .text { color: #ffffff; } header:not(.hero-invisible) .menu-light .open-nav .hamburger, header:not(.hero-invisible) .menu-light .open-nav .hamburger:before, header:not(.hero-invisible) .menu-light .open-nav .hamburger:after { background-color: #ffffff; } .menu-light nav#main-nav>ul>li>a { color: #ffffff; } header.nav-is-open:not(.header-transparent) .menu-light nav#main-nav>ul>li>a { color: #0d0d0d; } header.header-open:not(.header-transparent) .menu-light nav#main-nav>ul>li>a { color: #0d0d0d; } header.nav-is-open.header-transparent #menu.menu-light .open-nav .text { color: #ffffff; } header.nav-is-open.header-transparent #menu.menu-light .open-nav .hamburger:before { background-color: #ffffff; } header.nav-is-open.header-transparent #menu.menu-light .open-nav .hamburger:after { background-color: #ffffff; } header.nav-is-open.header-transparent #menu.menu-light .open-nav .hamburger:before { background-color: #ffffff; } header.nav-is-open.header-transparent #menu.menu-light .open-nav .hamburger:after { background-color: #ffffff; } header.hero-invisible #menu .open-nav .text { color: #0d0d0d !important; } header.hero-invisible #menu .open-nav .hamburger, header.hero-invisible #menu .open-nav .hamburger:before, header.hero-invisible #menu .open-nav .hamburger:after { background-color: #0d0d0d !important; } header.nav-is-open #menu .open-nav .hamburger { background-color: transparent !important; } header.hero-invisible .menu-light nav#main-nav>ul>li>a { color: #0d0d0d; } /* header-open on page load */ header.header-open #menu .open-nav { display: none; } header.header-open #menu nav#main-nav { visibility: visible; } header.header-open nav#main-nav ul>li { transition: none; top: 0px; opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } 

 <!DOCTYPE html> <html> <head> <title>Where is my item?</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <!-- HEADER --> <header id="header"> <div class="header-inner clearfix"> <div id="menu" class="right-float clearfix"> <a href="#" class="open-nav"><span class="hamburger"></span><span class="text">Menu</span></a> <nav id="main-nav"> <ul> <li class="current-menu-item"><a href="#">Home</a> <li><a href="about.html">About Losta</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="#">EN </a>|<a href="index-masonry - copy.html">TH</a></li> </ul> </nav> </div> <!-- END .header-inner --> </header> <!-- HEADER --> <body> <div class="my-block"> <h1>WHERE IS MY ITEM?</h1> <h4>Find your item easily--without GPS tiles!</h4> <button class="button">Sign Up</button> </div> </body> </html> 

我不知道这是怎么回事，非常感谢您的帮助！

PLOYPITI

Answer 1

 document.getElementById('menu').addEventListener("click", function() { document.getElementById('header').classList.toggle('nav-is-open'); }); 

 html, body { height: 100%; margin: 0; padding: 0; width: 100%; } body { display: table; } body { background-image: url("https://cdn.shopify.com/s/files/1/0862/7604/files/Sugar_Paper-Wedding_Agenda-Blog-2_1024x1024.jpg?v=1487113518") } body { background-size: cover; } .my-block { text-align: center; display: table-cell; vertical-align: middle; } h1 { font-family: raleway; letter-spacing: 3px; color: Salmon; } h4 { font-family: raleway; font-weight: 100; letter-spacing: 1.5px; color: DarkGray; line-height: 200% } button { font-family: raleway; color: salmon; letter-spacing: 2px; } .button { background-color: darksalmon; border: none; color: white; padding: 16px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; border: 2px solid #E9967A; margin: 10px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; } .button:hover { background-color: transparent; color: black; border: 2px solid #FA8072; } .square { border: solid 21px #fffff; width: 30px; height: 30px; } span { font-family: raleway; font-weight: 300; } li { font-family: raleway; } text { font-family: montserrat; } header { position: fixed; top: 0; left: 0; width: 100%; height: 0px; z-index: 10; } header.non-fixed { position: absolute; } header .header-inner { padding: 0px 40px; height: 0; margin-top: 60px; margin-bottom: 60px; } header .header-inner.wrapper { padding: 0; } #menu { position: relative; z-index: 10; } .open-nav { display: block; height: 30px; float: right; position: relative; z-index: 10; margin-left: 20px; } .open-nav .hamburger { display: inline-block; width: 22px; height: 2px; background-color: darksalmon; position: relative; top: -3px; transition: background 0.4s ease; } .open-nav .hamburger:before, .open-nav .hamburger:after { content: ''; width: 100%; height: 100%; position: absolute; background-color: darksalmon; right: 0; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform 0.4s, background 0.4s ease, right .2s ease; -webkit-transition: -webkit-transform 0.4s ease, background 0.4s, right .2s ease; -moz-transition: -moz-transform 0.4s, background 0.4s ease, right .2s ease; -o-transition: -o-transform 0.4s, background 0.4s ease, right .2s ease; -ms-transition: -ms-transform 0.4s, background 0.4s ease, right .2s ease; } .open-nav .hamburger:before { right: 2px; -webkit-transform: translateY(-6px) rotate(0deg); -moz-transform: translateY(-6px) rotate(0deg); -ms-transform: translateY(-6px) rotate(0deg); -o-transform: translateY(-6px) rotate(0deg); transform: translateY(-6px) rotate(0deg); } .open-nav .hamburger:after { right: 5px; -webkit-transform: translateY(6px) rotate(0deg); -moz-transform: translateY(6px) rotate(0deg); -ms-transform: translateY(6px) rotate(0deg); -o-transform: translateY(6px) rotate(0deg); transform: translateY(6px) rotate(0deg); } .open-nav:hover .hamburger:before, .open-nav:hover .hamburger:after { right: 0px; } .open-nav .text { width: 65px; text-align: right; display: inline-block; font-family: 'raleway'; font-weight: 700; font-size: 14px; line-height: 30px; text-transform: uppercase; color: darksalmon; letter-spacing: 0.12em; transition: width 0.4s ease, opacity 0.2s ease 0.3s, color 0.4s; } /* open nav state */ header.nav-is-open #menu .open-nav .hamburger { background-color: transparent; transition: background 0.1s ease; } header.nav-is-open #menu .open-nav .hamburger:before { width: 70%; right: 0px; -webkit-transform: translateY(0) rotate(45deg); -moz-transform: translateY(0) rotate(45deg); -ms-transform: translateY(0) rotate(45deg); -o-transform: translateY(0) rotate(45deg); transform: translateY(0) rotate(45deg); background-color: #0d0d0d; } header.nav-is-open #menu .open-nav .hamburger:after { width: 70%; right: 0px; -webkit-transform: translateY(0) rotate(-45deg); -moz-transform: translateY(0) rotate(-45deg); -ms-transform: translateY(0) rotate(-45deg); -o-transform: translateY(0) rotate(-45deg); transform: translateY(0) rotate(-45deg); background-color: #0d0d0d; } header.nav-is-open #menu .open-nav .text { transition: width 0.4s ease, opacity 0.2s ease; width: 0px; opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } nav#main-nav { float: left; visibility: hidden; } header.nav-is-open #menu nav#main-nav { visibility: visible; } nav#main-nav ul { list-style: none; text-align: center; margin: 0 auto; position: relative; z-index: 10; } nav#main-nav ul>li { margin: 0 0 0 20px; padding: 0; display: inline-block; position: relative; transition: top 0.3s ease 0.4s, opacity 0.3s ease; top: -5px; opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } #menu { position: relative; z-index: 10; } .open-nav { display: block; height: 30px; float: right; position: relative; z-index: 10; margin-left: 20px; } .open-nav .hamburger { display: inline-block; width: 22px; height: 2px; background-color: #0d0d0d; position: relative; top: -3px; transition: background 0.4s ease; } .open-nav .hamburger:before, .open-nav .hamburger:after { content: ''; width: 100%; height: 100%; position: absolute; background-color: #0d0d0d; right: 0; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform 0.4s, background 0.4s ease, right .2s ease; -webkit-transition: -webkit-transform 0.4s ease, background 0.4s, right .2s ease; -moz-transition: -moz-transform 0.4s, background 0.4s ease, right .2s ease; -o-transition: -o-transform 0.4s, background 0.4s ease, right .2s ease; -ms-transition: -ms-transform 0.4s, background 0.4s ease, right .2s ease; } .open-nav .hamburger:before { right: 2px; -webkit-transform: translateY(-6px) rotate(0deg); -moz-transform: translateY(-6px) rotate(0deg); -ms-transform: translateY(-6px) rotate(0deg); -o-transform: translateY(-6px) rotate(0deg); transform: translateY(-6px) rotate(0deg); } .open-nav .hamburger:after { right: 5px; -webkit-transform: translateY(6px) rotate(0deg); -moz-transform: translateY(6px) rotate(0deg); -ms-transform: translateY(6px) rotate(0deg); -o-transform: translateY(6px) rotate(0deg); transform: translateY(6px) rotate(0deg); } .open-nav:hover .hamburger:before, .open-nav:hover .hamburger:after { right: 0px; } .open-nav .text { width: 65px; text-align: right; display: inline-block; font-family: 'raleway'; font-weight: 700; font-size: 14px; line-height: 30px; text-transform: uppercase; color: #0d0d0d; letter-spacing: 0.12em; transition: width 0.4s ease, opacity 0.2s ease 0.3s, color 0.4s; } /* open nav state */ header.nav-is-open #menu .open-nav .hamburger { background-color: transparent; transition: background 0.1s ease; } header.nav-is-open #menu .open-nav .hamburger:before { width: 70%; right: 0px; -webkit-transform: translateY(0) rotate(45deg); -moz-transform: translateY(0) rotate(45deg); -ms-transform: translateY(0) rotate(45deg); -o-transform: translateY(0) rotate(45deg); transform: translateY(0) rotate(45deg); background-color: #0d0d0d; } header.nav-is-open #menu .open-nav .hamburger:after { width: 70%; right: 0px; -webkit-transform: translateY(0) rotate(-45deg); -moz-transform: translateY(0) rotate(-45deg); -ms-transform: translateY(0) rotate(-45deg); -o-transform: translateY(0) rotate(-45deg); transform: translateY(0) rotate(-45deg); background-color: #0d0d0d; } header.nav-is-open #menu .open-nav .text { transition: width 0.4s ease, opacity 0.2s ease; width: 0px; opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } nav#main-nav { float: left; visibility: hidden; } header.nav-is-open #menu nav#main-nav { visibility: visible; } nav#main-nav ul { list-style: none; text-align: center; margin: 0 auto; position: relative; z-index: 10; } nav#main-nav ul>li { margin: 0 0 0 20px; padding: 0; display: inline-block; position: relative; transition: top 0.3s ease 0.4s, opacity 0.3s ease; top: -5px; opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } nav#main-nav ul>li:first-child { margin: 0; } header.nav-is-open #menu nav#main-nav ul>li:nth-child(2n) { transition: top 0.3s ease 0.5s, opacity 0.3s ease 0.5s; } header.nav-is-open #menu nav#main-nav ul>li:nth-child(3n) { transition: top 0.3s ease 0.6s, opacity 0.3s ease 0.6s; } header.nav-is-open #menu nav#main-nav ul>li:nth-child(4n) { transition: top 0.3s ease 0.7s, opacity 0.3s ease 0.7s; } header.nav-is-open #menu nav#main-nav ul>li:nth-child(5n) { transition: top 0.3s ease 0.8s, opacity 0.3s ease 0.8s; } header.nav-is-open #menu nav#main-nav ul>li:nth-child(6n) { transition: top 0.3s ease 0.9s, opacity 0.3s ease 0.9s; } header.nav-is-open #menu nav#main-nav ul>li:nth-child(7n) { transition: top 0.3s ease 1.0s, opacity 0.3s ease 1.0s; } header.nav-is-open #menu nav#main-nav ul>li:nth-child(8n) { transition: top 0.3s ease 1.1s, opacity 0.3s ease 1.1s; } header.nav-is-open #menu nav#main-nav ul>li { top: 0; opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; transition: top 0.3s ease 0.4s, opacity 0.3s ease 0.4s; } nav#main-nav ul li>a { display: inline-block; font-family: 'raleway'; font-weight: 700; font-size: 14px; line-height: 30px; text-transform: uppercase; color: #0d0d0d; letter-spacing: 0.12em; transition: all 100ms ease; } nav#main-nav>ul>li:hover>a, nav#main-nav>ul>li.current-menu-item>a { color: #ea4452 !important; } /* submenu */ nav#main-nav ul li>ul.submenu { position: absolute; top: 20px; right: -20px; width: 240px; padding-top: 20px; opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; visibility: hidden; transition: all 400ms ease; } nav#main-nav ul li:hover>ul.submenu { opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; visibility: visible; top: 30px; transition: all 400ms ease; } nav#main-nav ul li>ul.submenu>li { margin: 0; padding: 2px 20px 2px 20px; display: block; position: relative; text-align: right; background: #0d0d0d; } nav#main-nav ul li>ul.submenu>li:first-child { padding-top: 15px; } nav#main-nav ul li>ul.submenu>li:last-child { padding-bottom: 15px; } nav#main-nav ul li>ul.submenu>li a { color: #ffffff; font-weight: 400; font-size: 13px; line-height: 18px; opacity: 0.6; filter: alpha(opacity=60); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; } nav#main-nav ul li>ul.submenu>li a em, nav#main-nav ul li>ul.submenu>li ai { font-size: 0.9em; text-transform: none; letter-spacing: 0.05em; } nav#main-nav ul li>ul.submenu>li a:hover, nav#main-nav ul li>ul.submenu>li.current-menu-item>a { opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=7-100)"; } /* menu color switch */ header:not(.hero-invisible) .menu-light .open-nav .text { color: #ffffff; } header:not(.hero-invisible) .menu-light .open-nav .hamburger, header:not(.hero-invisible) .menu-light .open-nav .hamburger:before, header:not(.hero-invisible) .menu-light .open-nav .hamburger:after { background-color: #ffffff; } .menu-light nav#main-nav>ul>li>a { color: #ffffff; } header.nav-is-open:not(.header-transparent) .menu-light nav#main-nav>ul>li>a { color: #0d0d0d; } header.header-open:not(.header-transparent) .menu-light nav#main-nav>ul>li>a { color: #0d0d0d; } header.nav-is-open.header-transparent #menu.menu-light .open-nav .text { color: #ffffff; } header.nav-is-open.header-transparent #menu.menu-light .open-nav .hamburger:before { background-color: #ffffff; } header.nav-is-open.header-transparent #menu.menu-light .open-nav .hamburger:after { background-color: #ffffff; } header.nav-is-open.header-transparent #menu.menu-light .open-nav .hamburger:before { background-color: #ffffff; } header.nav-is-open.header-transparent #menu.menu-light .open-nav .hamburger:after { background-color: #ffffff; } header.hero-invisible #menu .open-nav .text { color: #0d0d0d !important; } header.hero-invisible #menu .open-nav .hamburger, header.hero-invisible #menu .open-nav .hamburger:before, header.hero-invisible #menu .open-nav .hamburger:after { background-color: #0d0d0d !important; } header.nav-is-open #menu .open-nav .hamburger { background-color: transparent !important; } header.hero-invisible .menu-light nav#main-nav>ul>li>a { color: #0d0d0d; } /* header-open on page load */ header.header-open #menu .open-nav { display: none; } header.header-open #menu nav#main-nav { visibility: visible; } header.header-open nav#main-nav ul>li { transition: none; top: 0px; opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } 

 <!DOCTYPE html> <html> <head> <title>Where is my item?</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <!-- HEADER --> <header id="header"> <div id="menu" class="right-float clearfix"> <a href="#" class="open-nav"><span class="hamburger"></span><span class="text">Menu</span></a> <nav id="main-nav"> <ul> <li class="current-menu-item"><a href="#">Home</a> <li><a href="about.html">About Losta</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="#">EN </a>|<a href="index-masonry - copy.html">TH</a></li> </ul> </nav> <!-- END .header-inner --> </header> <!-- HEADER --> <body> <div class="my-block"> <h1>WHERE IS MY ITEM?</h1> <h4>Find your item easily--without GPS tiles!</h4> <button class="button">Sign Up</button> </div> </body> </html> 

如果您需要菜单位于最右上角，则此菜单可以正常工作。