Hallo,
ich habe eine Site übernommen und soll dort das Menü anpassen. Leider habe ich zu meinem Vorgänger keinen Kontakt und ich schaffe es einfach nicht das Menü so verstecken das es bei der Maus Hover aufgeht und ansonsten weg ist:
Der html teil ist so:
<div class="collapse navbar-collapse navbar-right" id="navbar">
<ul class="nav navbar-nav">
<li class="active">
<a href="index.html">PROJEKTE</a>
<ul>
<li>Im Großen Raum</li>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<li>Im Freiraum</li>
<li>Im Innen Raum</li>
<li>Im kleinen Raum</li>
</ul>
</li>
<li class="">
<a href="ueber_mich.html">ÜBER MICH</a>
</li>
<li class="">
<a href="kontakt.html">KONTAKT</a>
</li>
<li class="">
<a href="impressum.html">IMPRESSUM</a>
</li>
</ul>
</div>
In der CSS sieht es aktuell so aus und ich komme einfach nicht auf die Lösung:
/* FONTS */
@font-face {
font-family: NeutraDisplayBold;
src: url('fonts/NeutraDisplay-Bold.otf') format('opentype');
}
@font-face {
font-family: NeutraDisplayMediumAlt;
src: url('fonts/NeutraDisplay-MediumAlt.otf') format('opentype');
}
@font-face{
font-family: "AvantGardeGothicITC W01 Book";
src:url("fonts/5390730/a98bdca9-ab20-41a6-98f3-ed6bb54ed69e-.eot#iefix");
src:url("fonts/5390730/a98bdca9-ab20-41a6-98f3-ed6bb54ed69e-.eot#iefix") format("eot"),url("fonts/5390730/5b13893e-ac07-4b49-b0e4-355de4e4df8d.woff2") format("woff2"),url("fonts/5390730/a9e70966-2348-4c54-ace1-7f809fcee055.woff") format("woff"),url("fonts/5390730/9cb9e06e-0507-4768-ad8f-cba7f3ec98b6.ttf") format("truetype");
}
body {
background-color: white;
font-family: "AvantGardeGothicITC W01 Book";
}
.navbar, .projekte, .right_caption, .rechts, .textbox, .letter_spacing, .impressum-container h2 {
font-family: NeutraDisplayMediumAlt;
letter-spacing: 2px;
}
h1 {
font-family: NeutraDisplayBold;
line-height: 1.4em;
}
.container, .container-fluid {
width: 90%;
max-width: 1000px;
padding-top: 35px;
}
.size_logo {
width: 130px;
}
a {
color: black;
}
a:hover {
color: grey;
}
.w3-badge {
height: 13px;
width: 13px;
padding: 0;
}
ul {
padding-left: 0;
list-style-type: none;
overflow: hidden;
background-color: white;
}
li {
float: left;
margin-top: 46px;
color: red;
list-style-type: none;
position: relative;
}
li a {
display: block;
color: black;
text-align: center;
padding: 50px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: white;
color: black;
}
.active {
color: black;
background-color: white;
text-decoration: underline;
}
.w3-container {
float: none;
}
.underconstruction div {
padding-left: 0;
padding-right: 0;
font-size: 3em;
margin-top: 10%;
text-align: right;
letter-spacing: 2em;
text-transform: uppercase;
line-height: 1.3em;
}
.padding {
padding-left: 15px;
}
.termine {
text-align: right;
padding-left: 250px;
padding-top: 100px;
}
div {
font-size: 100%;
}
@media screen and (max-width: 600px) {
ul.topnav li.margin, ul.topnav li {
margin-top: 0;
float: left;
}
}
/* impressum */
.impressum-container {
font-size: 0.7em;
}
.impressum-container h2 {
letter-spacing: 2px;
font-size: 1.2em;
}
.impressum-container h3 {
font-size: 0.9em;
text-decoration: underline;
padding: 0;
letter-spacing: 1px;
}
.impressum {
float: right;
width: 120px;
}
/* rechter rand */
.rechts {
text-align: right;
padding-left: 0;
float: right;
}
.rechts-unten {
text-align: right;
vertical-align: text-bottom;
}
.rechts .text {
margin-top: 50px;
margin-bottom: 20px;
letter-spacing: 2px;
}
.rechts .gelberstrich {
position: absolute;
;
right: 0;
}
.gelberstrich {
background-color: #ffff1f;
width: 60px;
height: 0.7em;
margin: 15px;
}
/* Kontakt */
.textbox {
background-color: #ffff1f;
color: black;
border: none;
padding: 15px 25px 30px 25px;
margin-bottom: 20px;
}
.textbox .line {
height: 1px;
background-color: black;
width: 100%;
}
.textbox input, .textbox textarea {
width: 100%;
margin-top: 20px;
margin-bottom: 0;
padding: 0;
}
.textbox .send {
width: auto;
background-color: #ffff1f;
border: none;
text-decoration: underline;
text-transform: uppercase;
}
.textbox textarea {
background-color: #ffff1f;
border: none;
}
.g-recaptcha {
margin-top: 20px;
}
::-webkit-input-placeholder {
color: black;
}
:-moz-placeholder {
/* Firefox 18- */
color: black;
}
::-moz-placeholder {
/* Firefox 19+ */
color: black;
}
:-ms-input-placeholder {
color: black;
}
/* Projektseiten */
.ueberschrift_messestand {
padding-bottom: 30px;
padding-top: 0;
letter-spacing: 4px;
}
.carousel {
margin: 0 15px;
}
.carousel-control.left, .carousel-control.right {
background-image: inherit;
}
.carousel-control .glyphicon {
position: absolute;
top: 50%;
z-index: 5;
display: inline-block;
}
.carousel-control .glyphicon:before {
padding: 10px;
background-color: white;
}
.carousel-control.right .glyphicon {
right: -1px;
}
.carousel-control.left .glyphicon {
left: 0;
}
.glyphicon {
background-color: white;
color: black;
}
.right_caption {
text-align: right;
margin: 0 15px;
text-transform: uppercase;
margin-bottom: 4px;
}
/* Navbar */
.navbar {
background-color: inherit;
border: inherit;
padding-bottom: 60px;
}
.navbar-right {
padding-right: 0px;
}
.navbar-header {
padding-left: 15px;
}
.navbar-nav {
padding-top: 18px;
}
.navbar-default .navbar-nav>li>a {
color: black;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
background-color: inherit;
color: black;
}
@media (max-width: 768px) {
.navbar-collapse {
margin-top: 0;
border: inherit;
position: relative;
top: -40px;
}
.nav li {
width: 100%;
margin: 0;
}
.navbar-collapse, .navbar-collapse.in {
overflow-y: inherit;
}
.navbar {
padding-bottom: 0;
margin-bottom: 0;
}
.navbar-nav {
padding-top: 10px;
width: 100%;
margin: 0;
}
.navbar-brand {
height: auto;
}
.navbar-toggle {
top: -60px;
z-index: 10;
}
}
/* Ueber Mich */
.img-responsive {
width: 970px;
display: block;
margin: 0;
border: 0;
}
.ueberschrift_angelika {
padding-bottom: 30px;
padding-top: 30px;
letter-spacing: 4px;
}
h1 {
padding-top: 5px;
color: black;
font-size: 180%;
}
/* Footer */
.icons {
float: right;
padding-right: 15px;
position: relative;
top: 0;
}
.icons.top {
top: -20px;
}
.icons.contact {
margin-top: 30px;
padding: 0;
width: 100%;
margin-bottom: 60px;
}
/* Projekte */
.projekte {
margin-top: 50px;
}
.projekte .image {
float: right;
position: relative;
top: -40px;
padding-bottom: 50px;
padding-right: 15px;
}
.projekte h4 {
float: right;
transform: rotate(270deg);
position: relative;
top: 0px;
right: 12px;
transform-origin: 100% 0;
font-size: 0.8em;
margin: 0;
line-height: 1em;
color: black;
letter-spacing: 2px;
}
.projekte .element {
padding-bottom: 15px;
}
.projekte .element img {
padding-right: 20px;
width: 100%;
position: relative;
top: -1em;
}
.container.head {
padding-bottom: 40px
}
Ich hoffe mir kann jemand helfen
vielen dank