Dropdown menu / navigationsbar med Javascript

[henrik_t7]

Hej.

Jeg har download Dropdown menu / navigationsbar med Javascript nr. 14 i jeres Javascript toturials og indsat på en side jeg har lavet, men den virker undelige, dropdown menu stå ikke lige under denes hoved menu. Se link http://www.miethide.dk/test/u21vm2011.html

Håber at I kan finde ud hvad der er gal.

Henrik

[Daniel]

Hej Henrik.

Ja som menuen er lige nu kan du ikke rigtig bruge den til noget, det kan man hvis tydeligt se.
Har du lavet nogle ændringer i nogle af koderne, lavet om i noget af Javascriptet?
Hvis du har vil du så ikke lige indsætte dine koder herinde?

Mvh. Daniel

[henrik_t7]

Hej Daniel.

Jeg havde brudt de samme koder for en gl. menu og glemt at slette dem igen.
se css fil. Alt det med rødt forstyret den anden css fil og så kunne Ie 9 ikke få det til at virke.

/* Default CSS */
/* Generated by the CoffeeCup HTML Editor - http://www.coffeecup.com */

body { color:#000000;
background:#4F4F4F;




font: 90%/1 "DejaVu Sans", "URW Gothic L", "Helvetica Neue", Helvetica, Arial, "Microsoft Sans Serif", sans-serif; }

H1{color:#FFFFFF; }


/* -----------------------------------
header
----------------------------------- */

header
{ background:blu;
height:80px;
width:1200px;
margin-top:40px;
}

#top
{
background:green;
height:40px;
width:400px;
-moz-border-radius-topright: 55px;
-webkit-border-top-right-radius: 55px;
border-top-right-radius: 55px;

}

#bund
{ float:left;
background:green;
height:40px;
width:1200px;
border-bottom-color:#FFFFFF;
border-bottom-style:solid;
border-bottom-width:medium;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius: 10px;
border-top-right-radius: 10px;


}

/*-------------------------------------------------

Section
-------------------------------------------------*/

section

{
background:url('../images/baggrundorance.jpg');
background-size:cover;
width:1195px;
height:680px;
border-color:#FFFFFF;
border-style:solid;
border-width:medium;
}

/* -----------------------------------
ul
----------------------------------- */

section li { display: block;
color: #fff;}

section ul

{ float:right;
list-style-type:none;
margin:5px;
padding:0;
font-size:large;

}

section H2{color:#000000;
margin:50px; }

section figure {float:left; }


/*-------------------------------------------------

footer
-------------------------------------------------*/

footer

{ background:#FFFFFF;
height:100px;
width:1201px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;

}
footer figure
{float:right; }

/*----------------------------------------------------

Nav
-----------------------------------------------------*/


nav ul {
clear: left;
list-style: none;
width: 800px;
margin-left:350px;
height: 40px;
text-align: left;
border: none;

}

nav ul li {
display: inline;
border: none;
}

nav ul li a {
color: #FFFFFF;
font-size: 1em;
font-weight: normal;
letter-spacing: 0.1em;
padding: 2px 15px 2px 0px;
text-transform: uppercase;
border: none;
}

nav ul li a:hover {

color: #FFFF00;
text-decoration: none;
}

[Daniel]

Ahh ja så kan jeg godt se at der kan blive noget kludder i det.
Men super at du selv fandt ud af det.

[henrik_t7]

Hej.

Tak for det, jeg har lige et andet lille ting jeg ikke kan finde ud af.
Jeg har lavet denne menu, se foto og jeg vil gerne have at under menuen rykke lidt ned, så man kan se hvad der står over.
At man kan læse Team Speedway bedere.
Her er css koden.

Kode: Vælg alt

* {                     /* indstiller hele navens position */
    margin:0; 
    padding:0; 
    outline:0;
}
.nav {
       height:40px; 
       background:green;  /* Overordnet farve på hele naviagtionsbaren */
       color:#fff; 
       text-shadow:1px 1px #888; 
       z-index:1000;
}
.menu a {
     float:left; 
     color:#eee;    /* Linkfarven */
     text-decoration:none; 
     width:120px; height:28px; 
     padding-top:8px;
}
.menu span { 
    float:left; 
    color:#eee; 
    text-decoration:none;
    width:120px; 
    height:28px; 
    padding-top:8px;
}
.menu a:hover {
    color:#EF8510;       /* Her kan du style den farve selv link teksten skal have når du musen er over den */
}
.menu {
    list-style:none; 
    font:16px Arial,Verdana; 
    text-align:center; 
    width:800px; 
    margin:0 auto;
}
.menu li {
    position:relative; 
    float:left; 
    width:120px; 
    z-index:1000;
}
.menu ul {
    display:none; 
    position:absolute; 
    font:normal 13px Arial,Verdana; 
    top:36px; 
    left:0; 
    background:#81acc2;   /* listefarven uden hover */
    display:none; 
    list-style:none;
}
.menu ul li {
    float:none; 
    border-top:1px solid #ccc; 
    width:120px  
}
.menu ul li a, li.menuhover li a, li.menuhover li.menuhover li a {
    float:none; 
    display:block; 
    background:none; 
    height:35px; 
    padding-top:5px
}
.menu ul li a:hover, li.menuhover li a:hover, li.menuhover li.menuhover li a:hover {
    background:#518aa6; /* Farven på det udenom linket når man køre musen over det */
    color:#EF8510 ; /* Farven på liste tekst linket når man køre musen over det */
}
.menu ul li span, li.menuhover li span, li.menuhover li.menuhover li span {
    float:none; 
    display:block; 
    background:none; 
    height:32px; 
    padding-top:5px
}
.menu ul ul {
    left:120px; 
    top:0
}

.menu li.noborder {
    border-top:none
}
li.menuhover a, li.menuhover li.menuhover a {
    color:#fff; /* tekst farven på overordnet menu item */
    background:#518aa6 /* Farven på overordnet menu item */
}

[Daniel]

Jeg er på ingen måde sikker på at jeg er rigtigt på den, så du skal huske hvad du laver om for en sikkerhedsskyld hvis du prøver.

Men du kan prøve at ændre i denne CSS kode:

Kode: Vælg alt

.menu ul {
    display:none;
    position:absolute;
    font:normal 13px Arial,Verdana;
    top:36px;
    left:0;
    background:#81acc2;   /* listefarven uden hover */
    display:none;
    list-style:none;

Prøv at ændre den der hedder top:36px; til top:37px;
Altså så det kommer til at se sådan ud:

Kode: Vælg alt

.menu ul {
    display:none;
    position:absolute;
    font:normal 13px Arial,Verdana;
    top:37px;
    left:0;
    background:#81acc2;   /* listefarven uden hover */
    display:none;
    list-style:none;

Jeg ved ikke om det vil virke, men tror jeg umiddelbart.

[henrik_t7]

Hej Daniel,

ØV ØV virker ikke, det er det samme.

[henrik_t7]

Hej
Nu virker den se css

.menu a {
float:left;
color:#eee; /* Linkfarven */
text-decoration:none;
width:120px; height:35px; padding-top:8px;
}

og der hvor du skriv er ok, men skulle værer 45px se css

.menu ul {
display:none;
position:absolute;
font:normal 13px Arial,Verdana;
top:45px;
left:0;
background:#81acc2; /* listefarven uden hover */
display:none;
list-style:none;
}
så igen tak for hjælp.

god jul

Henrik

[Daniel]

Super at du har fået det til at virke, det er aldrig sjovt når noget driller en.

Og også en god jul til dig.