I'm trying to alter a tumblr layout (this one: athenabilitythemes(.)tumblr(.)com/athenability ) so that it has a dropdown menu instead of a static menu. When I got into the code and looked it over, it seemed like the creator had included the necessary CSS for drop-downs, but for the life of me I can't make it work! I want the kind of menu that she has on this one: athenabilitythemes(.)tumblr(.)com/T30, only looking like the menu on the black and white layout.

My only experience with CSS is poking at other people's codes and seeing what happens when I change stuff, so I'm a bit lost on how to fix this particular issue. I can build the kind of menu I want from scratch, but then it would be ugly and not match the layout. Yet when I try and edit/work with the code that's provided, I can't get the child menus to hide, or else I keep breaking the formatting somehow. Here's the relevant parts of the CSS that I'm working with, I just want to know how to write the HTML to make it work!

I didn't change any of the original CSS, just tried to mess around with the HTML in the menu because I keep swearing to myself that it'll work. I'd rather not change the CSS if it's possible since it's not mine, but if that's what needs to happen, I'll do that, too. The creator's page says her layouts are free to alter "in any way," so.

Please help!

Code:
<style type="text/css"> #wrap { width:985px; position: relative; margin: 0px auto 0px auto; background:#ffffff; } #header { padding:5px; background:#ffffff; text-align: center; margin-top:30px; } #outside{ border:1px solid #202020; background: #202020; width:975px; margin: 10px auto; } #navigation-1 { padding:1px 0; margin:0px; list-style:none; width: 100%; height:21px; border-top:1px solid#ffffff; border-bottom:1px solid #ffffff; font:normal 8pt verdana, arial, helvetica; } #navigation-1 li { margin:0; padding:0; display:block; float:left; position:relative; width: 139px; } #navigation-1 li a:link, #navigation-1 li a:visited { padding:4px 0; display:block; text-align:center; text-decoration:none; background: #202020; color: #ffffff; width: 139px; height:13px; -webkit-transition:0s; } #navigation-1 li:hover a, #navigation-1 li a:hover, #navigation-1 li a:active { padding:4px 0; display:block; text-align:center; text-decoration:none; background: #5a5a5a; color: #ffffff; width: 139px; height:13px; border-left: 0px solid #ffffff; border-right: 0px solid #ffffff; } #navigation-1 li ul.navigation-2 { margin:0; padding:1px 1px 0; list-style:none; display:none; background: #ffffff; width:110px; position:absolute; top:21px; left:-1px; border:1px solid #202020; border-top:none; } #navigation-1 li:hover ul.navigation-2 { display:block; } #navigation-1 li ul.navigation-2 li { width:110px; clear:left; } #navigation-1 li ul.navigation-2 li a:link, #navigation-1 li ul.navigation-2 li a:visited { clear:left; background: #202020; padding:4px 0; width: 139px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; } #navigation-1 li ul.navigation-2 li:hover a, #navigation-1 li ul.navigation-2 li a:active, #navigation-1 li ul.navigation-2 li a:hover { clear:left; background: #5a5a5a; padding:4px 0; width:139px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; } #navigation-1 li ul.navigation-2 li ul.navigation-3 { display:none; margin:0; padding:0; list-style:none; position:absolute; left: 137px; top:-2px; padding:1px 1px 0 1px; border:1px solid #202020; border-left:1px solid #202020; background: #ffffff; z-index:900; } #navigation-1 li ul.navigation-2 li:hover ul.navigation-3 { display:block; } #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited { background: #202020; } #navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active { background: #5a5a5a; } #navigation-1 li ul.navigation-2 li a span { position:absolute; top:0; left: 120px; font-size:12pt; color:#fe676f; } #navigation-1 li ul.navigation-2 li:hover a span, #navigation-1 li ul.navigation-2 li a:hover span { position:absolute; top:0; left:132px; font-size:12pt; color: #ffffff; } </style>