Drop-down menu - a tiny snag

[uk_martin]

Please have a look at the overhead menu here - http://www.brummiesfans.com/coppermine/

When hovering the mouse over "Album List", the dropdown options appear as normal. HOWEVER, run the mouse down that list, and the "container" which holds the menu options seems to stretch vertically, as if some padding is introduced at the top. The menu at http://www.brummiesfans.com/main/  shows how it should behave.

I have tried altering some settings (values for margins, padding etc where I've thought that they were the key values, but not yet found the right one. Can anyone who is more fluent with CSS please help?

The part of the CSS dealing with the drop-down menu follows:

Code Select Expand


main_menu {
padding: 0 0 0 0.5em;
    float: left;
    margin: 0;
    width: 98%;
}

.dropmenu, .dropmenu ul {
    list-style: none;
    line-height: 1em;
    padding: 0;
    margin: 0;
}

.dropmenu {
    padding: 0 0.5em;
}

.dropmenu a {
    display: block;
    color: #d00000;
}

.dropmenu a span {
    display: block;
    padding: 0 0 0 5px;
    font-size: 11px;
}

/* the backgrounds first level only*/
.dropmenu li a.firstlevel {
    margin-right: 8px;
    font-weight: bold;   
}

.dropmenu li a.firstlevel span.firstlevel {
    display: block;
    position: relative;
    left: -5px;
    padding-left: 5px;
    height: 17px;
    line-height: 21px;
}

.dropmenu li {
    float: left;
    position: relative;
    margin: 0;
}

.dropmenu li ul {
    z-index: 90;
    display: none;
    position: absolute;
    width: 19.2em;
    border-top: solid 1px #d00000;
    border-bottom: solid 1px #d00000;
    border-left: solid 1px #d00000;
    border-right: solid 1px #d00000;
    background: #ffdd00;
    padding: 5px 0 5px 0;
}

.dropmenu li li {
    width: 19em;
    margin: 0;
    border-left: solid 1px #ffdd00;
    border-right: solid 1px #ffdd00;
}

.dropmenu li li a span {
    display: block;
    padding: 4px;
}

.dropmenu li ul ul {
    margin: 0 0 0 13em;
}

/* the active button */
.dropmenu li a.active {
    background: #ffdd00 no-repeat 100% 0;
    color: #d00000;
    font-weight: bold;
}

.dropmenu li a.active span.firstlevel {
    background: #ffff00;
}

/* the hover effects */
.dropmenu li a.firstlevel:hover {
    background: #ffff00;
    color: #ff0000;
    cursor: pointer;
    text-decoration: none;
}

.dropmenu li a.firstlevel:hover span.firstlevel {
    background: #ffff00;
    text-decoration: none;
}

/* the hover effects on level2 and 3*/
.dropmenu li li a:hover {
    background: #ffff00;
    color: #ff0000;
    text-decoration: none;
}

.dropmenu li li a:hover {
border: 1px solid #D00000;
}
.dropmenu li li a {
margin-bottom: 0px;
margin-left: 3px;
margin-right: 3px;
}

.dropmenu li:hover ul ul, .dropmenu li:hover ul ul ul {
    top: 0em;
}

.dropmenu li li:hover ul {
    top: auto;
}

.dropmenu li:hover ul {
    display: block;
}

.dropmenu li li.additional_items {
    background-color: #ffdd00;
}


Thanks in advance for your help.

Martin