我是新手，但我需要你的帮助！
我有一个位于中心位置的菜单，请访问http://www.rosettafaris.com/
在最右边，我想添加一个语言下拉框，其中选择的每种语言都会转到自己的页面（例如en / index.html和de / index.html）
我还希望它可以在移动设备上运行吗？
你能帮忙吗？body {
font-family:'Kreon',serif;
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
}
img {
max-height:100%;
max-width:100%;
}
section {
position:relative;
padding:0;
background:#F0A830;
color:#FFF;
text-align:center;
}
section::before,section::after {
position:absolute;
content: '';
}
/* Separators Styles */
.ss-style-top::before {
left:0;
width:100%;
height:30px;
-webkit-background-size:25px 100%;
-moz-background-size:25px 100%;
-o-background-size:25px 100%;
background-size:25px 100%;
top:0;
background-image:linear-gradient(315deg,#FFF 50%,transparent 50%),
linear- gradient(45deg,#FFF 50%,transparent 50%);
margin-top:-30px;
z-index:100;
}
.ss-style-bottom::before {
left:0;
width:100%;
height:30px;
-webkit-background-size:25px 100%;
-moz-background-size:25px 100%;
-o-background-size:25px 100%;
background-size:25px 100%;
top:0;
background-image:linear-gradient(583deg,#FFF 50%,transparent 50%),
linear-gradient(136deg,#FFF 50%,transparent 50%);
margin-top:0px;
z-index: 100;
}
/*02. Header */
#header {
background-image:url(../img/night.jpg);
-webkit-background-size:/*@@prefixmycss->No equivalent*/;
-moz-background-size:cover;
-o-background-size:/*@@prefixmycss->No equivalent*/;
background-size:cover;
background-position:center center;
background-attachment:fixed;
background-repeat:no-repeat;
position:relative;
}
.bg-overlay {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(44,33,5,0.2);
z-index:0;
}
#header .center {
position:relative;
z-index:1;
color:white;
}
#header .bottom {
color:white;
}
#header .center .slogan {
font-size:26px;
text-transform:uppercase;
}
#header .banner h1 {
font-size:100px;
color:white;
text-transform:uppercase;
font-weight:bold;
display:inline-block;
background:#ed0121;
padding:0px 18px;
}
#header .subtitle h4 {
display:inline-block;
background:white;
color:#ed0121;
font-size:38px;
padding:0px 15px;
}
#header .bottom {
text-align:center;
width:100%;
position:absolute;
bottom:30px;
}
#header .bottom a {
font-size:36px;
color:whitesmoke;
position:relative;
top:-5px;
}
.navbar-nav>li:nth-child(3) {
margin-right: 110px;
}
/* 03. Navigation */
#menu {
background:rgba(33,45,57,0.8);
margin-bottom:0;
}
.navbar-brand h2 {
margin-top:0;
font-weight:bold;
color:white;
}
.navbar-brand {
padding-top:8px;
padding-bottom:0;
}
.navbar-inverse .navbar-nav>li>a {
-webkit-transition:all 0.4s;
-moz-transition:all 0.4s;
-o-transition:all 0.4s;
transition:all 0.4s;
color:white;
font-weight:bold;
}
.navbar-inverse .navbar-nav>li>a:hover,.navbar-inverse .navbar-nav>.active>a
{
background:#ed0121;
color:white;
text-shadow:none;
}
/* 04. Services*/
.light-wrapper {
background:#fbfbfb;
}
.inner {
padding-top:100px;
padding-bottom:100px;
}
.section-title {
font-size:36px;
line-height:40px;
text-transform:uppercase;
margin-bottom:15px;
font-weight:600;
}
.main.lead {
margin-bottom:80px;
}
.lead {
font-size:17px;
line-height:24px;
font-weight:normal;
text-transform:uppercase;
margin-bottom:15px;
color:#2e2e2e;
position:relative;
}
.lead:after {
position:absolute;
content:' ';
background:#ed0121;
width:80px;
height:3px;
bottom:-22px;
left:50%;
margin-left:-40px;
}
.story .col-wrapper {
padding:0 10px;
}
.story .icon-wrapper {
position:relative;
height:80px;
margin-top: 40px;
}
/* 05. parallax */
.parallax {
background:url(../img/parallax1.jpg) fixed no-repeat center center;
-webkit-background-size:/*@@prefixmycss->No equivalent*/;
-moz-background-size:cover;
-o-background-size:/*@@prefixmycss->No equivalent*/;
background-size:cover;
position:relative;
color:#FFF;
}
.parallax .inner {
padding-top:130px;
padding-bottom:130px;
}
.parallax.parallax2 {
background-image:url(../img/parallax2.jpg);
}
.bm10 {
margin-bottom:10px !important;
}
.facts h4 {
font-size:40px;
margin-bottom:20px;
}
.parallax h1,.parallax h2,.parallax h3,.parallax h4,.parallax h5,.parallax
h6 {
color:#fff;
}
.facts p {
font-size:16px;
text-transform:uppercase;
margin:0;
}
.story .icon-wrapper i {
font-size:70px;
}
.facts i {
font-size: 70px;
}
/* 06. Food menu */
.menu-items {
text-align:center;
margin:0 auto;
}
.menu-titles h1 {
text-shadow:none;
color:#ed0121;
text-align:center;
margin:0 auto;
padding-top:30px;
padding-bottom:15px;
}
#food-menu ul {
margin:0;
padding:0;
list-style:none;
}
.menu-images img {
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
border:5px solid #dadada;
display:block;
margin:auto;
margin-top: 40px;
}
/* 07. Special offers */
.hot-tag {
position:absolute;
bottom:0;
right:0;
z-index:15;
display:inline-block;
width:80px;
height:80px;
line-height:90px;
text-align:center;
font-weight:700;
color:#fff;
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;
}
.br-red {
background-color:#ed0121 !important;
}
.br-lblue {
background-color:#32c8de !important;
}
.br-green {
background-color:#51d466 !important;
}
.pricing {
border-top:1px solid #f1f1f1;
}
.pricing .pricing-item {
position:relative;
margin-top:40px;
margin-bottom:10px;
}
.pricing .pricing-item img {
max-width:250px;
float:left;
}
.pricing-item-details a,.pricing-item-details p,.pricing .lead {
color:white;
font-weight:bold;
}
.pricing .pricing-item .pricing-item-details {
margin-left:265px;
}
.pricing .pricing-item .pricing-item-details h3 {
margin-top:0;
margin-bottom:8px;
font-size:22px;
}
.pricing .pricing-item .pricing-item-details p {
}
.pricing .pricing-item .pricing-item-details a.btn {
margin-top:10px;
}
.pricing .pricing-item .pricing-item-details a.view-link {
display:inline-block;
margin-top:7px;
font-size:12px;
border-bottom:1px dotted #aeaeae;
}
.pricing .pricing-item .hot-tag {
top:0;
left:0;
margin-top:-15px;
margin-left:-15px;
width:55px;
height:55px;
line-height:50px;
font-size:23px;
font-weight:700;
border: 4px solid white;
}
/* 08. Reservation */
.form-group {
margin-bottom:24px;
}
.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-
control {
cursor:not-allowed;
background-color: transparent;
}
.form-control {
height:38px;
font-size:14px;
vertical-align:middle;
background-color:transparent;
-webkit-border-radius:2px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
-webkit-box-shadow:none !important;
-moz-box-shadow:none !important;
box-shadow:none !important;
-webkit-transition:none !important;
-moz-transition:none !important;
-o-transition:none !important;
transition:none !important;
}
.form p {
margin: 10px 0 30px 0;
}
/* 09. Chefs */
.chefs img {
border:5px solid #e7e7e7;
width: 80%;
}
/* 10. Footer */
.dark-wrapper {
background:#ed0121;
color:white;
font-size:20px;
font-weight:bold;
}
.dark-wrapper .ss-style-top::before {
background-image:linear-gradient(315deg,#ed0121 50%,transparent 50%),
linear- gradient(45deg,#ed0121 50%,transparent 50%);
}
.social-bar {
width:100%;
text-align:right;
}
.social-bar a {
display:inline-block;
margin-right:11px;
font-size:2.15em;
text-decoration:none;
color:#fff;
opacity:1;
filter:alpha(opacity=100);
-webkit-transition:opacity 350ms ease;
-moz-transition:opacity 350ms ease;
-o-transition:opacity 350ms ease;
transition:opacity 350ms ease;
}
.social-bar a:hover {
opacity:0.5;
filter: alpha(opacity=50);
}
.themeBy{
color: #ed0121;
background: white;
}
/* 11. Responsive styles */
@media (max-width: 991px){
.pricing .pricing-item .pricing-item-details {
margin-left: 0;
}
.pricing .pricing-item a img {
float: none;
margin-bottom: 30px;
}
}
@media (min-width:768px) {
.navbar-nav {
float:none !important;
width:100%;
text-align:center;
margin-left:9px;
}
.navbar-nav>li {
display:inline-block;
float:none;
}
#logo {
position:absolute;
display:block !important;
width:110px;
left:50%;
margin-left:-55px;
background:black;
-webkit-border-radius:0 0 100% 100%;
-moz-border-radius:0 0 100% 100%;
border-radius:0 0 100% 100%;
padding: 12px;
}
}
@media (max-width:767px) {
#header .banner h1 {
font-size:60px;
}
#header .subtitle h4 {
font-size: 22px;
}
.social-bar {
text-align: left;
margin-top: 30px;
}
}
答案 0 :(得分：0)
如果您为自己的语言创建了一个包含列表的容器，您可以使用jquery，就像我用来显示和隐藏菜单的小提琴一样：https://jsfiddle.net/nj55g0wz/1/
$(document).ready(function() {
var button = $('.button');
var menu = $('.hidden-menu');
button.on('click',function(){
menu.toggleClass('show');
});
});