Advanced search  

News:

CPG Release 1.6.26
Correct PHP8.2 issues with user and language managers.
Additional fixes for PHP 8.2
Correct PHP8 error with SMF 2.0 bridge.
Correct IPTC supplimental category parsing.
Download and info HERE

Pages: [1]   Go Down

Author Topic: Drop-down menu - a tiny snag  (Read 4116 times)

0 Members and 1 Guest are viewing this topic.

uk_martin

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Posts: 186
Drop-down menu - a tiny snag
« on: January 02, 2011, 06:24:09 pm »

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]
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
Logged
Pages: [1]   Go Up
 

Page created in 0.017 seconds with 19 queries.