I am looking to move the child div downwards by 5px inside the parent div. Setting margin-top:5px; on the inner div causes both the inner and parent divs to be pushed down from the div above the parent div, rather than just moving the inner div down from the parent div itself. How can I adjust it so that only the inner div is moved down by 5px relative to the parent div? I do not want the parent div to shift in relation to the div above it. Thank you for any assistance.
HTML for Navigation:
<nav>
<div class="nav-container">
<div id="cat_14623_divs">
<ul id="nav_14623">
<li><a href="#" onclick="return false;">AKINA & RED LAKE</a</li>
<li><a href="#" onclick="return false;">FRESH WILD CAUGHT FISH</a>
<ul id="navsub_14623_2326">
<li><a href="#" onclick="return false;">WALLEYE</a></li>
<li><a href="#" onclick="return false;">PERCH</a></li>
<li><a href="#" onclick="return false;">CRAPPIE</a></li>
<li><a href="#" onclick="return false;">NORTHERN</a></li>
<li><a href="#" onclick="return false;">WHITEFISH</a></li>
</ul></li>
<li><a href="#" onclick="return false;">NEWS FROM THE FISHERY</a></li>
<li><a href="#" onclick="return false;">CONTACT US</a></li>
<li class="last"><a href="#" onclick="return false;">FAQs</a></li>
</ul>
</div>
</div>
</nav>
CSS for Navigation:
nav{
position:relative;
width:960px;
background-color:#660000;
height:40px;
}
div.nav-container{
position:relative;
width:100%;
}
#cat_14623_divs{
margin-top:5px;
height:30px;
background-color:#520000;
width:960px;
}
#nav_14623{
list-style:none;
display:block;
padding:0;
width:80%;
margin:0 auto;
}
#nav_14623 li{
position:relative;
float:left;
padding: 0.5em 1.5em;
margin: 0px;
font-size:12px;
border-right:solid 2px #fff;
text-align:center;
}
#nav_14623 li.last{
border-right:none;
padding-right:5px;
}
#nav_14623 li a{
color:#FFF;
text-decoration:none;
}
#nav_14623 ul{
position: absolute;
left:0;
top: 100%;
display: none;
padding: 0 1000em; /* trick from css-tricks comments */
margin: 0 -1000em; /* trick from css-tricks comments */
list-style: none;
margin-left: 0px;
margin: 0;
padding: 5px;
width:200px;
z-index: 1000;
background: #660000;
border-left: 1px solid #336699;
border-right: 1px solid #336699;
border-bottom: 1px solid #336699;
border-top: none;
}
#nav_14623 ul li{
position: relative;
float: none;
border-right: none;
padding:0;
margin: 0;
}
#nav_14623 ul li a{
color: #fff;
font-size: 12px;
vertical-align: middle;
line-height:32px;
width: 100%;
height:35px;
display:block;
}
#nav_14623 ul li a:hover{
background: #520000;
width: 100%;
}
#nav_14623 li:hover > ul{
display: block;
}
#nav_14623:after {
content: ""; clear: both; display: block;
}
If you would like to visit the website, here is the URL: