Dropdown Hilfe :P

NoHand

Hallo Leudeeeee, was geht ab?

Ich bräuchte mal Hilfe

Folgendes, wenn ich über die Dropbox gehe ist ja erst mal das obere Blau, aber wenn ich dann nach unten gehe verschwindet das Blaue, wie mache ich es, wenn ich den Bereich des Blaues Feld verlasse und nach unten gehe, dass es immernoch blau ist??? Wäre nett für eure Hilfe.

Spoiler anzeigen

.nav { position: relative; top: 135px; float: left; left: 215px; } .nav ul { list-style: none; text-align: center; padding: 0; margin: 0; } .nav ul { list-style: none; text-align: center; padding: 0; margin: 0; } .nav li { font-family: 'Oswald', sans-serif; font-size: 1.2em; line-height: 40px; height: 40px; border-bottom: 1px solid #888; } .nav a { text-decoration: none; color: #fff; display: block; transition: .3s background-color; } .nav a:hover { background-color: #368fdeeb; } .nav a.active { background-color: #fff; color: #424242; cursor: default; } @media screen and (min-width: 600px) { .nav li { width: 120px; border-bottom: none; height: 43px; line-height: 43px; font-size: 1.4em; } .nav li { display: inline-block; margin-right: -4px; } } #dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 88px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; z-index: 1; color: #424242; cursor: default; font-size:18px; } #dropdown:hover .dropdown-content { display: block; }

teacher

ohne struktur wird das tricky

wenn wir davon ausgehen, dass #dropdown das element .nav a enthält, kannst du das einfach mit #dropdown:hover > .nav a {background: red} lösen.
wenn das nicht der fall ist, musst du dein markup ein wenig umstrukturieren, da in css ein child nicht den parent triggern kann.

NoHand

Zitat von teacher

ohne struktur wird das tricky

wenn wir davon ausgehen, dass #dropdown das element .nav a enthält, kannst du das einfach mit #dropdown:hover > .nav a {background: red} lösen.
wenn das nicht der fall ist, musst du dein markup ein wenig umstrukturieren, da in css ein child nicht den parent triggern kann.

HTML

Spoiler anzeigen

<html>

<head>

<title>Layout</title>

</head>

<body>

<ul>

<li class="tutorials"><a class="active" href="#">Tutorials</a></li>

<li class="about"><a href="#">About</a></li>

<li class="news" id="dropdown"><a href="#">Newsletter</a>

<span>Hello World!</span>

</div>

</li>

<li class="contact"><a href="#">Contact</a></li>

</ul>

</div>

</header>

</body>

CSS

Spoiler anzeigen

body {

margin:0;

background-color:#f4f4f4;

}

header {

width:100%;

height:28%;

background-color:#3475af;

}

img {

border:0;

outline-style:none;

outline-width:0;

}

.hotel {

position: absolute;

top: -164px;

width: 38%;

opacity: 0.8;

background: url(/images/default_new_bg_right.png);

float: right;

right: 40px;

height: 342px;

}

.nav {

position: relative;

top: 135px;

float: left;

left: 215px;

}

.nav ul {

list-style: none;

text-align: center;

padding: 0;

margin: 0;

}

.nav ul {

list-style: none;

text-align: center;

padding: 0;

margin: 0;

}

.nav li {

font-family: 'Oswald', sans-serif;

font-size: 1.2em;

line-height: 40px;

height: 40px;

border-bottom: 1px solid #888;

}

.nav a {

text-decoration: none;

color: #fff;

display: block;

transition: .3s background-color;

}

.nav a:hover {

background-color: #368fdeeb;

}

.nav a.active {

background-color: #fff;

color: #424242;

cursor: default;

}

@media screen and (min-width: 600px) {

.nav li {

width: 120px;

border-bottom: none;

height: 43px;

line-height: 43px;

font-size: 1.4em;

}

.nav li {

display: inline-block;

margin-right: -4px;

}

#dropdown {

position: relative;

display: inline-block;

}

.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 88px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

padding: 12px 16px;

z-index: 1;

color: #424242;

cursor: default;

font-size:18px;

}

#dropdown:hover .dropdown-content {

display: block;

}

teacher

#dropdown:hover > a {background: red}

NoHand

Thanks

Jetzt mitmachen!