Dropdown Hilfe :P

    Hallo Leudeeeee, was geht ab?

    Ich bräuchte mal Hilfe

    why.gif

    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; }

    ohne struktur wird das tricky :P

    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.

    Zitat von teacher

    ohne struktur wird das tricky :P

    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>

    <link href="/style.css" rel="stylesheet" />

    </head>

    <body>

    <header>

    <div class="hotel"></div>

    <div class="nav">

    <ul>

    <li class="home"><a href="#">Home</a></li>

    <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>

    <div class="dropdown-content">

    <span>Hello World!</span>

    </div>

    </li>

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

    <li class="contact"><a href="#">Contact</a></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;

    }

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden