Adding a margin messing up display of drop-down menu - html

Question

The issue I'm having is that when I add a margin to my hover over drop down navmenu it messes up all the content which was meant to drop down and clusters it all up nearly just above it. Although before adding a margin the navigation menu worked perfectly fine, and yes removing the margin fixes the issue but I need to add a margin.
Here is my CSS, let me know if you need the HTML also. (Note, I am doing this on Notepad++ as HTML >4<)
#navmenu a {
text-decleration: none;
display: block;
width: 124px;
height: 27px;
line-height: 25px;
background-color: ;
border: 1px solid #CCC;
border-radius: 5px;
font-family: Magneto;
font-size: 20px;
color: ffffff;
transition: ease-in all 400ms;
-moz-transition: ease-in all 300ms;
-webkit-transition: ease-in all 300ms;
-o-transition: ease-in all 300ms;
margin: -40px;
}
#navmenucontainer {
margin: 15px;
margin-left: 10px;
width: 230px;
height: auto;
float: left;
}
Here is the Relevent HTML:
<div id="navmenucontainer">
<ul id="navmenu">
<li>
Menu
<ul>
<li>Education
</li>
<li>Hobbies
</li>
<li>Interests
</li>
</ul>
</li>
</ul>
</div>

Answer 1

demo - http://jsfiddle.net/victor_007/fajLeLsy/
it looks like you want to do something like this
don't give -margin for a
#navmenu a {
text-decleration: none;
display: block;
width: 124px;
height: 27px;
line-height: 25px;
background-color: ;
border: 1px solid #CCC;
border-radius: 5px;
font-family: Magneto;
font-size: 20px;
color: ffffff;
}
#navmenucontainer {
margin: 15px;
width: 230px;
height: auto;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li:hover ul {
opacity: 1;
visibility: visible;
}
ul li ul {
opacity: 0;
visibility: hidden;
transition: ease-in all 400ms;
-moz-transition: ease-in all 300ms;
-webkit-transition: ease-in all 300ms;
-o-transition: ease-in all 300ms;
}
<div id="navmenucontainer">
<ul id="navmenu">
<li> Menu
<ul>
<li>Education
</li>
<li>Hobbies
</li>
<li>Interests
</li>
</ul>
</li>
</ul>
</div>