Avatar billede olzen Nybegynder
27. september 2006 - 14:05 Der er 8 kommentarer og
1 løsning

Hvorfor hopper menuen?

Hej Alle,

Jeg kan simplethen ikke finde ud af hvorfor min menu hopper når der kommer en undermenu på et af hovedpunkterne..

Håber der er nogen der kan hjælpe - CSS og HTML nedenfor.. Håber det bare er noget i CSS jeg kan indstille så den ikke hopper?

CSS
------------------------

/* List TopNav Multimenu start*/

div#mainmenu  {
/* needed to give a margin above and below the buttons */

}


.mainmenu {
}
#nav {
    list-style: none;
    position: relative;

    color : #344760;
    font-weight : bold;
    font-family :  arial , sans-serif;
    font-size:16px;
    text-decoration : none;
    width: 150px;
    margin: 10px 10px 10px 10px;
    text-align : right;
    height:22px;
    line-height:22px;   
}

#nav ul {
    list-style: none;
    display: none;
    position: absolute;
    overflow: visible;
}

#nav li {
    display: block;
    position: relative;
   
    color : #344760;
    font-weight : bold;
    font-family :  arial , sans-serif;
    font-size:16px;
    text-decoration : none;
      width: 150px;
    text-align : right;
    height:22px;
    line-height:22px;
}

#nav li a {
    display: block;
    color : #344760; 
    font-weight: bold;
    text-decoration: none;
        height:22px;
    line-height:22px;
}

#nav li a:hover {
    color : #344760;
    background:#FFFFFF;
        height:22px;
    line-height:22px;
}

#nav li#sel A {
    color : #344760;
        height:22px;
    line-height:22px;
}
#nav li#sel A:hover {
    color: #773106;
        height:22px;
    line-height:22px;
}

/* 1st dropdown level */
#level1 {
    display: block;
    left: 138px;
    top: 0; !important;
    margin: 0px 10px 0px 10px;
    font-size: 12px;
    font-family: arial;
    font-weight: bold;
    height:12px;
    line-height:12px;
}
#level1 UL {
    position: relativ;
    overflow: visible;
}
#level1 li {
    display: block;
    margin: 0 !important; 
    margin: 0;
    padding: -0 0 !important;
    font-size: 12px;
    height:12px;
    line-height:12px;
}
#level1 li A {
    display: block;
    width: 150px;
    background: #344760;
    padding: 2px;
    font-weight: normal;
    text-align: left;
    text-decoration: none;
    color: #FFFFFF;
    margin: 0px 10px 0px 10px;
    border: 0;
    height:12px;
    line-height:12px;
}
#level1 li A:hover {
    display: block;
    color: #344760;
    background-color: #FFFFFF;
    height:12px;
    line-height:12px;
}

#level1 li#sel A {
    background-color: #344760;
    color: #FFFFFF;
    height:12px;
    line-height:12px;
}
#level1 li#sel A:hover {
    background-color: #344760;
    color: #FFFFFF;
    height:12px;
    line-height:12px;
}
------------------------

HTML
------------------------
<td id="mainmenu"><UL id=nav><LI><a href="index.php?id=2" title="Forsiden" onfocus="blurLink(this);">Forsiden</a></LI><LI id=sel><a href="index.php?id=3" title="Profil" onfocus="blurLink(this);">Profil</a><UL id=level1><LI><a href="index.php?id=18" title="Profil (fortsat)" onfocus="blurLink(this);">Profil (fortsat)</a></LI></UL></LI><LI><a href="index.php?id=4" title="Kunsten" onfocus="blurLink(this);">Kunsten</a></LI><LI><a href="index.php?id=5" title="Musikken" onfocus="blurLink(this);">Musikken</a><UL id=level1><LI><a href="index.php?id=21" title="Musikken (fortsat)" onfocus="blurLink(this);">Musikken (fortsat)</a></LI></UL></LI><LI><a href="index.php?id=17" title="Netop nu!" onfocus="blurLink(this);">Netop nu!</a></LI><LI><a href="index.php?id=7" title="Galleri" onfocus="blurLink(this);">Galleri</a></LI><LI><a href="index.php?id=9" title="Kontakt" onfocus="blurLink(this);">Kontakt</a></LI></UL></td>

------------------------
Avatar billede jokkejensen Novice
27. september 2006 - 14:11 #1
smid et link til siden :)
Avatar billede olzen Nybegynder
27. september 2006 - 14:27 #2
Avatar billede jokkejensen Novice
27. september 2006 - 14:55 #3
et hurtigt bud kunne være at du skrifter mellem display: none; og display: block i din hover...

Jeg ville nok tage at vælge visibility: hidden; og visibility: visible;

Display:none; "fjerner" det helt fra layoutet, mes visibility reservere plads til elementet - du fjerner det og tilføjer det - i stedet for at vise/skjule det..

Håber du forstår.

/JJ
Avatar billede jokkejensen Novice
27. september 2006 - 15:10 #4
jo - det virker hvis du erstatter ; display:block; med visibility: visible; og display:none; med visibility: hidden;

/JJ
Avatar billede olzen Nybegynder
27. september 2006 - 15:12 #5
Hej Jokke,

Jeg har prøvet mig lidt frem, og nu hopper den ikke mere, men nu starter den med at være visible.. ?? :-)

CSS
------------------------/* List TopNav Multimenu start*/

div#mainmenu  {
/* needed to give a margin above and below the buttons */

}


.mainmenu {
}
#nav {
    list-style: none;
    position: relative;

    color : #344760;
    font-weight : bold;
    font-family :  arial , sans-serif;
    font-size:16px;
    text-decoration : none;
    width: 150px;
    margin: 10px 10px 10px 10px;
    text-align : right;
    height:22px;
    line-height:22px;   
}

#nav ul {
    list-style: none;
    visibility:hidden;
    position: absolute;
    overflow: visible;
}

#nav li {
        visibility:visible;
    position: relative;
   
    color : #344760;
    font-weight : bold;
    font-family :  arial , sans-serif;
    font-size:16px;
    text-decoration : none;
      width: 150px;
    text-align : right;
    height:22px;
    line-height:22px;
}

#nav li a {
    visibility:visible;
    color : #344760; 
    font-weight: bold;
    text-decoration: none;
        height:22px;
    line-height:22px;
}

#nav li a:hover {
    color : #344760;
    background:#FFFFFF;
        height:22px;
    line-height:22px;
}

#nav li#sel A {
    color : #344760;
        height:22px;
    line-height:22px;
}
#nav li#sel A:hover {
    color: #773106;
        height:22px;
    line-height:22px;
}

/* 1st dropdown level */
#level1 {
    visibility: visible;
    left: 138px;
    top: 0; !important;
    margin: 0px 10px 0px 10px;
    font-size: 12px;
    font-family: arial;
    font-weight: bold;
    height:12px;
    line-height:12px;
}
#level1 UL {
    position: relativ;
    overflow: visible;
}
#level1 li {
    visibility:visible;
    margin: 0 !important; 
    margin: 0;
    padding: -0 0 !important;
    font-size: 12px;
    height:12px;
    line-height:12px;
}
#level1 li A {
    visibility:visible;
    width: 150px;
    background: #344760;
    padding: 2px;
    font-weight: normal;
    text-align: left;
    text-decoration: none;
    color: #FFFFFF;
    margin: 0px 10px 0px 10px;
    border: 0;
    height:12px;
    line-height:12px;
}
#level1 li A:hover {
    visibility:visible;
    color: #344760;
    background-color: #FFFFFF;
    height:12px;
    line-height:12px;
}

#level1 li#sel A {
    background-color: #344760;
    color: #FFFFFF;
    height:12px;
    line-height:12px;
}
#level1 li#sel A:hover {
    background-color: #344760;
    color: #FFFFFF;
    height:12px;
    line-height:12px;
}
---------------------
Avatar billede olzen Nybegynder
27. september 2006 - 15:18 #6
Jeg har lige prøvet at erstatte alle som du sagde, og der viser den stadig undermenuerne fremme..
Avatar billede jokkejensen Novice
28. september 2006 - 10:10 #7
hey - okay..

Men kan du ikke lettere selv gennemskue hvad der er galt ? - har du ikke lavet den i første omgang ?
Avatar billede olzen Nybegynder
02. oktober 2006 - 13:31 #8
Hej igen,

Jeg kan simpelthen ikke få den menu til at virke.. Den starter med at være slået ud.. Kan ikke finde hoved eller hale i det.. :-(
Avatar billede olzen Nybegynder
02. oktober 2006 - 13:35 #9
Her kommer menuen's CSS lige:

----------

/* List TopNav Multimenu start*/

div#mainmenu  {
/* needed to give a margin above and below the buttons */

}


.mainmenu {
}
#nav {
    list-style: none;
    position: relative;

    color : #344760;
    font-weight : bold;
    font-family :  arial , sans-serif;
    font-size:16px;
    text-decoration : none;
    width: 150px;
    margin: 10px 10px 10px 10px;
    text-align : right;
    height:22px;
    line-height:22px;   
}

#nav ul {
    list-style: none;
    position: absolute;
    overflow: visible;
}

#nav li {
    visibility: hidden;
    position: relative;
   
    color : #344760;
    font-weight : bold;
    font-family :  arial , sans-serif;
    font-size:16px;
    text-decoration : none;
      width: 150px;
    text-align : right;
    height:22px;
    line-height:22px;
}

#nav li a {
    visibility: visible;
    color : #344760; 
    font-weight: bold;
    text-decoration: none;
        height:22px;
    line-height:22px;
}

#nav li a:hover {
    color : #344760;
    background:#FFFFFF;
        height:22px;
    line-height:22px;
}

#nav li#sel A {
    color : #344760;
        height:22px;
    line-height:22px;
}
#nav li#sel A:hover {
    color: #773106;
        height:22px;
    line-height:22px;
}

/* 1st dropdown level */
/* 1st dropdown level */
#level1 {
    visibility: visible;
    left: 138px;
    top: 0; !important;
    margin: 0px 10px 0px 10px;
    font-size: 12px;
    font-family: arial;
    font-weight: bold;
    height:12px;
    line-height:12px;
}
#level1 UL {
    position: relativ;
    overflow: visible;
}
#level1 li {
    visibility:visible;
    margin: 0 !important; 
    margin: 0;
    padding: -0 0 !important;
    font-size: 12px;
    height:12px;
    line-height:12px;
}
#level1 li A {
    visibility:visible;
    width: 150px;
    background: #344760;
    padding: 2px;
    font-weight: normal;
    text-align: left;
    text-decoration: none;
    color: #FFFFFF;
    margin: 0px 10px 0px 10px;
    border: 0;
    height:12px;
    line-height:12px;
}
#level1 li A:hover {
    visibility:visible;
    color: #344760;
    background-color: #FFFFFF;
    height:12px;
    line-height:12px;
}

#level1 li#sel A {
    background-color: #344760;
    color: #FFFFFF;
    height:12px;
    line-height:12px;
}
#level1 li#sel A:hover {
    background-color: #344760;
    color: #FFFFFF;
    height:12px;
    line-height:12px;
}


/* 2nd dropdown level */
#level2 {
    display: block;
    left: 116px !important;
    left: 110px;
    top: 0; !important;
/*    z-index: 5;  */
}
#level2 UL {
    display: block;
    position: relative;
    overflow: visible;
}
#level2 LI {
    display: block;
}
#level2 li A {
    display: block;
    background: #afb6d0;
}
#level2 li A:hover {
    display: block;
    background: #dadde9;
}

#level2 li#sel A {
    background-color: #dadde9;
    color: #364061;
}
#level2 li#sel A:hover {
    background-color: #dadde9;
    color: #ff6600;
}

/* all see this */
#nav ul ul, #nav ul ul ul {
  visibility:hidden;
  position: absolute;
  width: 150px;
  top: 0;
}
/* non-IE bowsers see this */
#nav ul li>ul, #nav ul ul li>ul {
    margin-top: 0;
}

#nav LI:hover UL UL, #nav LI:hover UL UL UL{
    visibility:hidden;
}
#nav LI:hover UL {
   
    visibility:visible;
}
#nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul {
    visibility:visible;
   
}
li>ul {
    top: auto:
}
UNKNOWN {
    margin-top: 0;
    left: auto;
    top: auto;
}

----------
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