Give this a try.
<style type="text/css">
a.hid {color:#000; text-decoration:none; outline-style:none;}
a.hid em {display:none;}
a.hid:hover {text-decoration:none;}
a.hid:active, a.hid:focus {background:#fff; color:#0000FF;}
a.hid:active span, a.hid:focus span {display:none;}
a.hid:active em, a.hid:focus em {display:block; color:#555; width:100%; font-style:normal; cursor:default;}
</style>
</head>
<body>
<a class="hid" href="#more" onclick="this.hideFocus=true" onblur="this.hideFocus=false"><span>
Main Category One</span>
Main Category One
Add One Link here
Add One Link here
Add One Link here</a>
<a class="hid" href="#more" onclick="this.hideFocus=true" onblur="this.hideFocus=false"><span>
Main Category Two</span>
Main Category Two
Add Two Link here
Add Two Link here
Add Two Link here</a>
<a class="hid" href="#more" onclick="this.hideFocus=true" onblur="this.hideFocus=false"><span>
Main Category Three</span>
Main Category Three
Add Three Link here
Add Three Link here
Add Three Link here</a>
EDIT:
Sorry.
After looking at this more I found this didn't work in FF. Might be a nesting problem with "a" tags. Works fine for adding "More" text, just not links. Maybe one of you pros can figure out another way.