.navbar-nav .nav-link {
color: #FFFFFF;
}
li {
background-color: gray;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
@font-face {
font-family: fontAwesome;
src: url(../fonts/fontawesome.eot), url(../fonts/fontawesome.ttf) format('truetype'), url(../fonts/fontawesome.eot?#iefix) format('embedded-opentype'), url(../fonts/fontawesome.woff) format('woff');
}
body {
font-size: 18px;
}
p {
font-size: 16px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #006633;
}
h1 {
font-size: 32px;
}
h2 {
font-size: 24px;
}
a {
color: #006633;
}
a:focus,
a:hover,
a:active {
color: #006633;
}
.line {
border: 1px solid #ccc;
margin: 21px auto;
max-width: 150px;
}
.grey-btn {
background-color: #999999;
border: 2px solid white;
text-transform: uppercase;
font-size: 16px;
text-decoration: none;
}
.bg-green {
background-color: #006633;
}
.check:before {
content: '\f00c';
font-family: fontAwesome;
font-size: 30px;
color: #006633;
position: absolute;
left: 0;
right: 0;
margin: 0 0 0 15px;
}
.shoe_icon {
max-width: 100px;
margin: 0 auto;
}
a.more-btn span {
padding: 10px 10px;
border: 1px solid #fff;
background: #006633;
color: white;
text-transform: uppercase;
border-radius: 5px;
white-space: normal;
}
a.more-btn span:hover {
background-color: #999999;
color: white;
border-color: #006633;
}
/*********nav Bar Css Start Here**********/
.navbar-default {
background-color: #FFFFFF;
border-color: #006633;
border-bottom: 1px solid rgba(0, 0, 0, .15);
background-image: none;
padding: 0;
}
.navbar-toggler-right {
background: #0e6f4a;
top: 40px;
z-index: 99;
}
.main-menu-content li.dropdown a.nav-link {
float: left;
padding-right: 0px;
background-image: none;
box-shadow: none;
}
.main-menu-content li.dropdown span {
float: right;
padding: 15px 5px 0;
color: #006633;
}
/* Drop - down menu */
.navbar-nav .dropdown-menu>li a.nav-link {
color: #006633;
}
.navbar-nav li.active {
color: white;
background: #006633;
}
.navbar-toggler span.navbar-toggler-icon:before {
content: '\f0c9';
font-family: fontAwesome;
color: white;
position: absolute;
left: 0;
right: 0;
text-align: center;
top: 8px;
}
/*.dropdown.open .dropdown-menu{display: block;}
button.navbar-toggler-right:focus { outline: 5px auto white;}
.dropdown-submenu { position: relative }
.dropdown-submenu>.dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.dropdown-submenu:hover>.dropdown-menu { display: block }
.dropdown-submenu>a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #ccc; margin-top: 5px; margin-right: -10px;}
.dropdown-submenu:hover>a:after { border-left-color: #ccc }
.dropdown-submenu.pull-left { float: none }
.dropdown-submenu.pull-left>.dropdown-menu { left: -100%; margin-left: 10px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}*/
/*********nav Bar Css End Here**********/
/*Box Container*/
ul.feat-ul {
list-style: none;
}
ul.feat-ul li:before {
content: "";
background: url(../img/imgpsh_fullsize.png) no-repeat;
width: 20px;
height: 20px;
position: absolute;
top: 5px;
background-size: contain;
left: -25px;
}
ul.feat-ul li {
color: #fff;
font-size: 20px;
margin: 10px 0;
font-weight: normal;
position: relative;
display: inline-block;
}
/*Box Container*/
/* hover effect of boxs */
.detailsbox-sub {
background: rgba(0, 102, 51, 0.67) none repeat scroll 0 0;
cursor: pointer;
left: 0;
margin: 0 auto;
overflow: hidden;
/* padding: 6.5em; */
position: absolute;
right: 0;
text-align: center;
top: 80%;
height: 100%;
-webkit-transition: all 250ms ease;
transition: all 250ms ease;
}
.hoverbox {
overflow: hidden;
position: relative;
}
.hoverbox .detailsbox-sub {
top: calc(100% - 84px);
-webkit-transition: all 250ms ease;
transition: all 250ms ease;
}
.hoverbox:hover .detailsbox-sub {
-webkit-transform: translateY(calc(-100% + 85px));
-ms-transform: translateY(calc(-100% + 85px));
transform: translateY(calc(-100% + 85px));
-webkit-transition: all 250ms ease;
transition: all 250ms ease;
cursor: pointer;
}
.hoverbox .detailsbox-sub h2 {
color: white;
}
.detailsbox-sub a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.detailsbox-sub a span {
position: absolute;
top: 45%;
left: 0;
right: 0;
max-width: 200px;
margin: 0 auto;
padding: 10px 50px;
border: 1px solid #fff;
background: #006633;
color: white;
text-transform: uppercase;
border-radius: 0px;
/*font-size: 20px;*/
}
.detailsbox-sub a span:hover {
background-color: #999999;
color: white;
border-color: white;
}
.package-info {
background-color: #006633;
float: left;
text-transform: uppercase;
width: 100%;
color: white;
}
/*********Booking inquiry Css Starts Here**********/
.bar_tp {
background: #0e6f4a;
text-align: center;
}
.box {
display: inline-block;
margin: 5px 5px;
}
.sub h3 {
color: white;
margin: 12px 0;
/*font-size: 20px;*/
}
/*.detailsbox { background: transparent none repeat scroll 0 0;}*/
.img-responsive.loks {
margin-top: -14%;
max-width: 78%;
}
.sub button {
font-size: 15px;
display: inline-block;
text-align: center;
text-decoration: none;
text-transform: uppercase;
background: rgb(153, 153, 153) none repeat scroll 0 0;
border: 1px solid #fff !important;
border-radius: 0;
box-shadow: none;
color: #fff;
font-weight: 400;
padding: 7px;
}
.sub .form-control {
-moz-appearance: number-input;
background: rgb(153, 153, 153) none repeat scroll 0 0;
border: medium none !important;
border-radius: 0;
box-shadow: none;
color: #fff;
font-weight: 400;
padding: 0 10px;
}
.sub .box select,
.sub .box button {
width: 110px;
}
.box .date_picker {
background: rgb(153, 153, 153);
border-radius: 0;
/*font-size: 15px;*/
padding: 10px;
max-width: 110px;
}
/*********Booking inquiry Css Ends Here**********/
/*********Siderbar Unfo Css Starts Here**********/
.siderbar-info-wrapper {
transform: translateY(-50%);
position: fixed;
right: 0;
top: 50%;
z-index: 50;
background: #006633;
padding: 0 5px 0 5px;
}
.siderbar-info-wrapper a {
text-decoration: none;
}
.siderbar-info-wrapper a span,
.siderbar-info-wrapper div.info-vorteile-btn span {
/*font-size: 16px; */
padding: 15px 10px;
top: 0;
background: rgb(153, 153, 153);
display: inline-block;
min-width: 200px;
position: absolute;
right: 55px;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: right center;
transform-origin: right center;
transition: -webkit-transform .5s;
transition: transform .5s;
transition: transform .5s, -webkit-transform .5s;
cursor: pointer;
color: #fff;
text-transform: uppercase;
}
.siderbar-info-wrapper a:hover span,
.siderbar-info-wrapper div.info-vorteile-btn:hover span {
webkit-transform: scaleX(1);
transform: scaleX(1);
}
.siderbar-info-wrapper .siderbar-info-booking,
.siderbar-info-wrapper .siderbar-info-location,
.siderbar-info-wrapper .siderbar-info-phone {
border-radius: 0;
background: rgb(153, 153, 153);
display: block;
height: 50px;
margin: 5px 0;
position: relative;
width: 50px;
cursor: pointer;
}
.siderbar-info-wrapper .info-vorteile-btn {
border-radius: 0;
background: white;
display: block;
height: 50px;
margin: 5px 0;
position: relative;
width: 50px;
cursor: pointer;
}
.siderbar-info-wrapper .siderbar-info-booking:before {
content: '\f236';
font-family: fontAwesome;
font-size: 30px;
color: white;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
}
.siderbar-info-wrapper .siderbar-info-location:before {
content: '\f1b9';
font-family: fontAwesome;
font-size: 30px;
color: white;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
}
.siderbar-info-wrapper .siderbar-info-phone:before {
content: '\f095';
font-family: fontAwesome;
font-size: 30px;
color: white;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
}
.siderbar-info-wrapper .info-vorteile-btn::before {
content: '\f00c';
font-family: fontAwesome;
font-size: 30px;
color: #006633;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
}
.close-btn {
cursor: pointer;
background: #0e6f4a;
}
.close-btn::before {
content: '\f00d';
font-family: fontAwesome;
font-size: 17px;
color: white;
padding-left: 10px;
}
.display-none {
opacity: 0;
visibility: hidden;
transition: opacity .7s;
}
.display-block {
opacity: 1;
visibility: visible;
transition: opacity .7s;
}
.info-action-container {
background: rgba(153, 153, 153, 0.59);
height: 100vh;
position: fixed;
z-index: 9999;
top: 0;
right: 0;
max-width: 350px;
overflow-y: auto;
}
.info-action-inner {
height: 700px;
}
.info-action-container .vorteile-txt,
.info-action-container .actions-btns,
.info-action-container .social-btns {
padding: 50px 25px 25px;
}
.info-action-container .vorteile-txt,
.info-action-container .actions-btns {
border-bottom: 1px solid white;
}
.vorteile-txt h2 {
color: white;
font-size: 30px;
}
.vorteile-txt ul {
list-style: none;
margin: 0;
}
.vorteile-txt ul li:before {
content: '\f00c';
font-family: fontAwesome;
font-size: 17px;
color: #5fa32a;
position: absolute;
left: -25px;
top: 5px;
}
.vorteile-txt ul li {
color: white;
position: relative;
/*font-size: 16px;*/
}
.info-action-container .actions-btns a {
width: 100%;
background: #006633;
border: 1px solid white;
display: block;
padding: 10px;
text-align: center;
color: #fff;
text-decoration: none;
text-transform: uppercase;
margin-top: 5px;
position: relative;
font-size: 14px;
}
.info-action-container .actions-btns a:hover {
background-color: #999999;
color: #006633;
border-color: white;
}
.actions-btns a.booking:before,
.actions-btns a.location:before,
.actions-btns a.phone:before {
content: '\f236';
font-family: fontAwesome;
font-size: 26px;
color: white;
position: absolute;
left: 10px;
top: 0px;
}
.info-action-container .actions-btns a.booking:before {
content: '\f236';
}
.info-action-container .actions-btns a.location:before {
content: '\f1b9';
}
.info-action-container .actions-btns a.phone:before {
content: '\f095';
}
.info-action-container .social-btns {
text-align: center;
}
.info-action-container .social-btns a {
padding: 10px;
color: white;
transition: color 0.7s ease;
}
.info-action-container .social-btns a:hover {
text-decoration: none;
transition: color 0.7s ease;
}
.info-action-container .social-btns a.fb:hover {
color: #3b5998;
}
.info-action-container .social-btns a.twitter:hover {
color: #4099ff;
}
.info-action-container .social-btns a.googleplus:hover {
color: #dc4e41;
}
.info-action-container .social-btns a.pinterest:hover {
color: #c9151c;
}
.info-action-container .social-btns a.fb:before {
content: '\f082';
font-family: fontAwesome;
font-size: 50px;
}
.info-action-container .social-btns a.twitter:before {
content: '\f081';
font-family: fontAwesome;
font-size: 50px;
}
.info-action-container .social-btns a.googleplus:before {
content: '\f0d4';
font-family: fontAwesome;
font-size: 50px;
}
.info-action-container .social-btns a.pinterest:before {
content: '\f0d3';
font-family: fontAwesome;
font-size: 50px;
}
/*********Siderbar Info Css End Here**********/
/*********Scroll top Css Start Here**********/
#myBtn {
color: white;
}
a#myBtn:hover {
text-decoration: none;
}
a#myBtn.scroll-arrow-up:before {
content: "\f062";
font-family: fontAwesome;
font-size: 25px;
}
#myBtn {
background-color: #999999;
border: 1px solid white;
bottom: 20px;
color: white;
cursor: pointer;
outline: medium none;
padding: 5px 10px;
position: fixed;
right: 30px;
z-index: 99;
}
/*********Scroll top Css End Here**********/
/* Footer CSS Start Here */
#footer {
background-color: #006633;
color: #FFFFFF;
}
#footer a {
color: white;
}
#footer a:hover {
text-decoration: underline;
}
#footer ul li {
display: inline;
margin: 0 15px;
}
a.footer-btn:hover span {
background-color: #006633;
text-decoration: none;
}
/* Footer CSS End Here */
.social-menu .social-icons {
width: 40px;
max-width: 40px;
min-width: 40px;
}
.img-responsive.shoe_icon {
margin-bottom: 5%;
}
.text-data h4 {
margin-left: 35px;
}
.text-data p {
color: #006633;
}
/* Inner page Full content with Slider */
.content-full-slider {
background: rgb(153, 153, 153);
height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav class="navbar-toggleable-md">
<div class="navbar-collapse collapse show dropdown" id="navbarCollapse" data-hover="dropdown" data-animations="fadeInDown fadeInRight fadeInUp fadeInLeft" aria-expanded="true">
<ul class="nav navbar-nav mr-auto mainmenu">
<li class="nav-item ml-2 mr-2 dropdown ">
<a class="nav-link dropdown-toggle" href="#" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Hotel 111111</a>
<ul class="dropdown-menu " aria-labelledby="dropdownMenuLink">
<li class="dropdown-item"><a class="nav-link" href="#">Geschichte und Tradition</a></li>
<li class="dropdown-item"><a class="nav-link" href="#">Inklusiv-Leistungen</a></li>
<li class="dropdown-item dropdown-submenu">
<a class="nav-link dropdown-toggle" href="#">Wohnen 111111</a>
<ul class="dropdown-menu dropdownhover-right">
<li class="dropdown-item"><a class="nav-link" href="#">Action</a></li>
<li class="dropdown-item dropdown-submenu show">
<a href="#" class="nav-link">Dropdown</a>
<span class="dropdown-toggle caret" data-toggle="dropdown" role="button" aria-expanded="true"></span>
<ul class="dropdown-menu dropdownhover-right">
<li class="dropdown-item dropdown-submenu">
<a href="#" class="nav-link">Dropdown</a>
<span class="dropdown-toggle caret" data-toggle="dropdown" role="button" aria-expanded="true"></span>
<ul class="dropdown-menu dropdownhover-right">
<li class="dropdown-item"><a href="#">Action</a></li>
<li class="dropdown-item"><a href="#">Another action</a></li>
<li class="dropdown-item"><a href="#">Something else here</a></li>
<li class="dropdown-item"><a href="#">Separated link</a></li>
<li class="dropdown-item"><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-item"><a class="nav-link" href="#">Pauscalen</a></li>
</ul>
</li>
<li class="nav-item ml-2 mr-2 dropdown">
<a class="nav-link js-activated dropdown-toggle" href="#" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Reiten</a>
<ul class="dropdown-menu dropdownhover-left">
<li class="dropdown-item"><a class="nav-link" href="#">Geschie und Tradition</a></li>
<li class="dropdown-item"><a class="nav-link" href="#">Reitnteuer</a></li>
<li class="dropdown-item"><a class="nav-link" href="#">Uere Pferde</a></li>
<li class="dropdown-item"><a class="nav-link" href="#">Reitunterricht</a></li>
<li class="dropdown-item"><a class="nav-link" href="#">Reithalle</a></li>
<li class="dropdown-item dropdown">
<a class="nav-link js-activated dropdown-toggle" href="#" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Reiten</a>
<span class="dropdown-toggle caret" data-toggle="dropdown" role="button" aria-expanded="true"></span>
<ul class="dropdown-menu dropdownhover-right">
<li class="dropdown-item"><a class="nav-link" href="#">Geschi Tradition</a></li>
<li class="dropdown-item"><a class="nav-link" href="#">Reitanteuer</a></li>
<li class="dropdown-item"><a class="nav-link" href="#"> Pferde</a></li>
<li class="dropdown-item"><a class="nav-link" href="#">Reitunterricht</a></li>
<li class="dropdown-item"><a class="nav-link" href="#">Reithalle</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item ml-2 mr-2 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Kinder</a>
<ul class="dropdown-menu dropdownhover-bottom">
<li class="dropdown-item"><a class="nav-link" href="#">Kintreuung</a></li>
<li class="dropdown-item"><a class="nav-link" href="#">Krstammtisch</a></li>
<li class="dropdown-item"><a class="nav-link" href="#">-Aktivprogramm</a></li>
</ul>
</li>
<li class="nav-item ml-2 mr-2 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Wellness</a>
<ul class="dropdown-menu dropdownhover-bottom">
<li class="dropdown-item"><a class="nav-link" href="#">SA- und Fitnessbereich</a></li>
<li class="dropdown-item"><a class="nav-link" href="#">S-Kinder</a></li>
<li class="dropdown-item"><a class="nav-link" href="#">SA-Anwendungen</a></li>
<li class="dropdown-item"><a class="nav-link" href="#">Badesee</a></li>
</ul>
</li>
<li class="nav-item ml-2 mr-2 dropdown">
<a class="nav-link" href="#" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Aktive</a>
<ul class="dropdown-menu dropdownhover-bottom">
<li class="dropdown-item"><a class="nav-link" href="#">Sommer</a></li>
<li class="dropdown-item"><a class="nav-link" href="#">Winter</a></li>
</ul>
</li>
<li class="nav-item ml-2 mr-2"><a class="nav-link" href="#"> Region</a></li>
</ul>
</div>
</nav>
为什么你调用一个跨度插入符号图标？ –
是您创建的多级菜单，还是从3.x代码片段复制的？ – ZimSystem