Avatar billede nickyc Nybegynder
06. juni 2008 - 13:04 Der er 5 kommentarer

Dropdown ligger sag bag elementer

I Firefox ligger den højre del af min dropdown menu sig bag diverse elementer, og fatter ikke hvorfor....

Prøv at tag et kig her: http://cabiweb.inforce.dk/forside/sektioner/jobcentre

Så kig med FF, også højredel af dropdown, så vil i kunne se den ligger sig bag "Content" elementer... Hvorfor??

Mit CSS til dropdown ser sådanne ud:

/* START DROPDOWN*/
#dTop2 {
        height:39px;
    }
#topNav1, #topNav2 {
    margin-top:10px;
}

#topNav2 {
    overflow: hidden;
}

#dTop2 .swDrop {
    float:left;
}

#dTop2 .last {
    float: left;
    border: none;
}

li.swDrop, ul.cNav, ul.cNav li { list-style:none; margin-left: 0px; padding-left: 0px; }
li.last, ul.cNav, ul.cNav li { list-style:none; margin-left: 0px; padding-left: 0px; }


#dTop2 #topNav2 .swDrop {
    border-right:1px solid #999;
}

#dTop2 #topNav2 .last {
    border-right:none;
}

#dTop2 #topNav1 .swDrop {
    border-left:1px solid #999;
}

#dTop2 #topNav1 .swDrop:first-child, #dTop2 #topNav2 .swDrop:last-child {border: 0px solid #999;}

#dTop2 #topNav1 ul ul li.swDrop {
    float:none;
    display:block;
    background:none;
    border:none;
}

#topNav1 ul ul li.last {
    float:none;
    display:block;
    background:none;
    border:none;
}

#dTop2 ul {
    margin:0; padding:0;
}

#dTop2 li {
        margin: 0;
        padding: 0;
        display: inline;
        white-space: nowrap;
    }

#dTop2 ul a {
        text-transform : uppercase;

        font-size: 100%;
        display: block;
        padding: 4px 9px 5px 9px;    ;
        font-weight: bold;
        text-decoration: none;
        border: 0;
}

#dTop2 ul a:hover, #dTop2 a.expanded, #dTop2 ul a.selected {
        color: #000;
    }

    #dTop2 ul ul a {
        font-weight: normal;
        border-bottom: 1px solid #999;               
        padding:1px 20px 2px 10px;
        margin: 0;
        border: 0;
        color: #000;
        background: none;
        min-width: 60px;
    }
    #dTop2 ul ul a.selected
    {
        color: #000;
    }
    #dTop2 ul ul a:hover {
        background-color: #aaa;
        color: #fff;
    }
    #dTop2 ul ul {
        z-index: 99;
        position: absolute;
        display: none;
        background: #fff;
        border: 1px solid #999;
        border-bottom: 4px solid #999;       
        padding: 5px 2px 5px 2px;
        margin: 0px 0 0 0px;
    }

    #dTop2 ul .swDrop:hover ul, #dTop2 ul .swDrop.over ul {
        display: block;
    }

#topNav1 {
    float:left;
}

#topNav2 {
    float:right;
}
div#topNav2  {
    margin-right:-2px;
}
div#topNav1  {
    margin-left:-2px;
}

/* END DROPDOWN*/
Avatar billede mclemens Nybegynder
06. juni 2008 - 14:33 #1
Prøv med:
#dTop {position:relative;z-index:9;}
Avatar billede olebole Juniormester
06. juni 2008 - 15:34 #2
<ole>

- men du burde overveje at få en anelse logik ind i din CSS-kode. Den er ét stort rod af regler, der overskriver hinanden på yderst 'kreative' måder  =)

/mvh
</bole>
Avatar billede nickyc Nybegynder
06. juni 2008 - 16:25 #3
Ikke mig der har lavet css koden, 3 andre der har været indeover, og nu er den landet i mine hænder...
Avatar billede olebole Juniormester
06. juni 2008 - 16:43 #4
- stakkels mand!  =)
Avatar billede olebole Juniormester
06. juni 2008 - 16:46 #5
- men så er der vel kun ekstra god grund til at få skidtet skrevet om, så det er til at arbejde med  ;o)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester