Avatar billede Alias Praktikant
06. december 2016 - 15:26

Dropdown menu forsvinder ved mouse over - hvorfor???

Hej, jeg er ved at studere til multimediedesigner og er i gang med at lave et portfolio.
Jeg har lavet en menu med drop down - men kan simpelthen ikke få min mouse over hover-effekt til at virke. Drop down menuen forsvinder ligeså snart musen flyttes henover den første underkategori. Er der nogle som ved hvorfor det sker? Har prøvet alt muligt fra at flytte min border-radius, til fjerne mellemrummet mlm. menu og dd, z-index etc. Aner ikke hvad jeg nu skal ændre på.

Her er html-delen, det drejer sig om:

<div class="col-1-1 header"><!-- header START -->
    <div class="col-6-12 push-1-12 logo-box">
        <div class="logo"><a href="index.html" title="Go to frontpage"></a></div> <!-- tooltip and hover effect added -->
    </div>
    <div class="col-4-12 push-1-12 nav-menu">
            <ul id="navigation">
                <div class="dropdown"><!-- dropdown menu START -->
                    <li><a href="index.html" class="selected">About</a></li>
                        <div class="dropdown-content">
                            <a href="#">Who I am</a>
                            <a href="#">What I do</a>
                            <a href="#">CV</a>
                            <a href="#">Gallery</a>
                            <a href="#">Contact</a>
                        </div><!-- dropdown menu END -->
                </div>   
                <div class="dropdown"><!-- dropdown menu START -->
                    <li><a href="">Projects</a></li>
                        <div class="dropdown-content">
                            <a href="#">1. semester</a>
                            <a href="#">2. semester</a>
                            <a href="#">3. semester</a>
                            <a href="#">4. semester</a>
                        </div><!-- dropdown menu END -->
                </div>       
                <div class="dropdown"><!-- dropdown menu START -->   
                    <li><a href="">Learning</a></li>
                          <div class="dropdown-content">
                            <a href="#">1. semester</a>
                            <a href="#">2. semester</a>
                            <a href="#">3. semester</a>
                            <a href="#">4. semester</a>
                        </div><!-- dropdown menu END -->
                  </div>
              </ul>
      </div>     
</div><!-- header END -->
<div class="container">


Min CSS:

#navigation {
    padding-top: 60px;
    font-family: "handlee", "shadows-into-light-two", "tahoma", sans-serif;
    font-size: 1.2em;
    opacity: none;
}

#navigation li {
    list-style: none;
    display: inline;
    padding: 0px 15px 0px 15px;
}

#navigation a {
    text-decoration: none;
    color: white
}

#navigation a.selected {
    color: #5353b9;
}

#navigation a:hover {
    color: #9D96DF;
}
/* nav menu END */



/* dropdown menu START */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #000000;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 0px 0px 10px 10px;
    z-index: 2;
   
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.8em;
   
}

.dropdown-content li:hover {
    background-color: #13132F;
    border-radius: 0px 0px 10px 10px;
   
}

.dropdown:hover .dropdown-content {
    display: block;
   
}
/* dropdown menu END */


Det ville være super, hvis der var én som lå inde med svaret - det ville jeg sætte pris på!
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester