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