Hallo,
ich habe da mal 2 Sachen und hoffe ihr könnt mir da ein bisschen weiterhelfen. Ich habe eine Navbar mit Untermenüs. Ich möchte wenn ich auf ein Menü gehe, dass diese Menü einen Border-bottom Hovereffekt erhält und ich möchte die Hintergrundfarbe der Untermenüs ändern. Ich habe euch mal meinen css-Code angefgt und hoffe ihr könnt mir ein bisschen helfen. Das wäre auf jeden Fall total lieb von euch. Ich möchte mich schon mal im voraus bei euch vielmals bedanken. Kann mir vielleicht noch einer mal sagen, was das navbar-invers bedeutet?
CSS
/* Menu Section css---------------------------------------------------------------------------------------------------- */
.navbar-default {
background-color: transparent;
border-color: #e7e7e7;
}
.navbar {
position: relative;
min-height: 40px;
padding: 14px 0;rftg
margin-top: 0px;
margin-bottom: 0px;
border-radius: 0px;
}
.navbar-nav li .caret { display: none; }
.nav {
list-style: outside none none;
margin-bottom: 0;
padding: 11px 0;
}
.navbar-inverse .navbar-toggle {
background: none repeat scroll 0 0 #66d1b9;
border-color: none;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
background-color: #66d1b9;
}
.navbar-inverse {
border-color: none;
border-style: none;
border-width: 0px;
padding: 5px 0;
border-color: none;
}
.navbar-brand {
font-family: 'Open Sans';
font-weight:600;
font-size: 32px;
height: auto;
line-height: 42px;
margin-right: 50px;
padding: 10px 0px;
}
.navbar-default .navbar-brand { color: #1b1b1b; }
.navbar > .container .navbar-brand { margin-left: 0px; }
.navbar-inverse {
background-color: rgba(0, 0, 0, 0.6);
border-bottom: 0;
border-top: 0;
border-right: 0;
border-left: 0;
padding: 0;
}
.navbar-wrapper {
position: absolute;
right: 0;
left: 0;
margin-top: 0px;
z-index: 20;
}
.navbar .navbar-nav > .open > a,
.navbar .navbar-nav > .open > a:hover,
.navbar .navbar-nav > .open > a:focus {
background-color: #ffffff;
}
.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus {
background-color: #ffffff;
}
.navbar .navbar-nav > li {
margin-right: 0px;
padding: 0 0 0px 0px;
}
.navbar-default .navbar-nav > li > a {
color: #1b1b1b;
font-family: 'Open Sans';
font-weight:600;
font-size: 14px;
letter-spacing: 0.5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
/* padding: 9px 17px; */
padding: 9px 15px;
transition: all 0.3s ease-in-out 0s;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #ffffff;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a { background: transparent !important; color: #1b1b1b !important; }
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover { background: transparent !important; }
}
@media only screen and (min-width: 200px) and (max-width: 480px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a { background: transparent !important; color: #1b1b1b !important; }
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover { background: transparent !important; }
}
/*Dropdown Menus & Submenus Css----------------------------------------------------------*/
.dropdown-menu {
padding: 0;
min-width: 230px;
border-radius: 0px;
box-shadow: 0;
border: 0 none;
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5);
}
.navbar-default .dropdown-menu > li { padding: 0; }
.dropdown-menu > li > a {
color: #ffffff;
font-family: 'Open Sans';
font-weight:600;
font-size: 14px;
line-height: 20px;
padding: 15px 20px;
transition: all 0.3s ease-in-out 0s;
letter-spacing: 0.5px;
word-wrap:break-word;
white-space: normal;
}
.dropdown-menu > li > a:last-chlid {
border-bottom: 0px;
border-bottom: 0;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #ffffff;
text-decoration: none;
}
.dropdown-submenu { position:relative; }
.dropdown-submenu > .dropdown-menu {
top:0;
left:100% !important;
margin-top:0px;
margin-left:0px;
-webkit-border-radius:0px 0px 0px 0px;
-moz-border-radius:0px 0px 0px 0px;
border-radius:0px 0px 0px 0px;
}
.dropdown-submenu:hover > .dropdown-menu { display:block; }
.dropdown-submenu .pull-left{ float:none; }
.dropdown-submenu.pull-left > .dropdown-menu{
left:-100%;
margin-left:10px;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
}
.navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header {
padding: 12px 15px;
}
.navbar-right .dropdown-menu {
left: 0;
right: 0;
}
@media only screen and (max-width: 767px) and (min-width: 480px)
{
.open:{ }
}