CSS - Can't Have It Both Ways

#sddm1{
	margin: 0;
	padding: 0;
	z-index: 30;
}

#sddm1 li {
	margin: 0;
	padding: 0;
}

#sddm1 li a {
	
	margin: 0 1px 0 0px;
	text-decoration: underline;
	font-size: 11px;
}
#sddm1 li.sex {
	position:relative;
	right:24px;
}
#sddm1 div {
	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	height:14px;
	color:#fff;
}
#sddm1 div a {
	position: relative;
	left: 100px;
	padding: 5px 10px;.
	color:#fff;
	background:#115B8F;
	text-decoration: underline;
}

			<li><a href="why_you_should_help.html">Why you should help</a></li>
			<ul id="sddm1">
<li class="sex">
<a href="howyoucanhelp.html" onmouseover="mopen('m1')" onmouseout="mclosetime()">How you can help</a><div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="candy.html" style="color:#fff;">Candy Fundraiser</a>
<a href="hotchocolate.html" style="color:#fff;">Hot Chocolate Fundraiser</a>
<a href="pitbeef.html" style="color:#fff;">Pit Beef Fundraiser</a>
<a href="hotrodcarshow.html" style="color:#fff;">Hot Rod Car Show</a>
<a href="donations.html" style="color:#fff;">Donations</a>
<a href="grants.html" style="color:#fff;">Grants</a>
</li>
</ul><div style="clear:both;">