Problemer med dropdown-meny

Pilot_ · 20. november 2007

Heisann,

Har aldri vært bort i drop-down-menyer før, men holder på nå. Jeg har fått det _nesten_ til, men det er noen bugs her. Jeg har problemer med at backgrunnsbildene i menyen passer på knappene. Uansett hva jeg forandrer på, finner jeg ikke ut hva som er feil.

Klikk her for demo.

HTML

<html>

<head>

<title>Brannvernservice.no</title>

<!--[if IE]>

body {

behavior: url(csshover.htc);

font-size: 100%;

}

#meny ul li {float: left; width: 100%;}

#meny ul li a {height: 1%;}

#meny a, #meny h2 {

font: bold 10px/14px arial;

}

</style>

<![endif]-->

</head>

<body>

<ul>

<li><h2><a href="#">Forside</a></h2>

</li>

</ul>

<ul>

<li><h2>Produkter</h2>

<ul>

<li>Brannslokking

<li>Evakuering

<li>Alarm

<li>Verneutstyr

<li>Slokkesystemer

<li>Pyroteknikk

<li>Spesialprodukter

</li>

</ul>

</li>

</ul>

<ul>

<li><h2>Tjenester</h2>

<ul>

<li><a href="#">Sertifisering</a></li>

<li><a href="#">Re-sertifisering</a></li>

<li><a href="#">Brannvernlederkurs</a></li>

<li><a href="#">Branndokumentasjon</a></li>

<li><a href="#">HMS oppbygging</a></li>

</ul>

</li>

</ul>

<ul>

<ul>

<li><a href="#">Brannvernservice.no</a></li>

<li><a href="#">Samarbeidspartnere</a></li>

</ul>

</li>

</ul>

<ul>

<li><h2>Kontakt oss</h2>

<ul>

<li><a href="#">Avdeling Ålesund</a></li>

<li><a href="#">Avdeling Måløy</a></li>

<li><a href="#">Avdeling Florø</a></li>

</ul>

</li>

</ul>

</div>

</body>

</html>

CSS

#meny {

width: 100%;

float: left;

}

#meny ul {

font: 10px verdana;

background-image: url("DropDown.png");

background-repeat: x-repeat;

background-attachment: fixed;

list-style: none;

margin: 0;

padding: 0;

width: 151px;

float: left;

}

#meny a, #meny h2 {

text-align:center;

display: block;

border: 0;

margin: 0;

}

#meny h2 {

font: 15px verdana;

color: #ffffff;

background-image: url("DropDownTopic.jpg");

width: 151px;

margin: 0;

padding-top: 7px;

padding-bottom: 7px;

}

#meny a {

color: #ffffff;

text-decoration: none;

}

#meny a:hover {

color: #eeeeee;

}

#meny li {

color: #ffffff;

position: relative;

text-align: left;

height: 17px;

padding-top: 5px;

margin: 0;

}

#meny ul ul ul {

position: absolute;

top: 0;

padding-top: 5px;

text-align: left;

left: 100%;

}

div#meny ul ul {

display: none;

}

div#meny ul li:hover ul { display: block; }

div#meny ul ul,

div#meny ul li:hover ul ul,

div#meny ul ul li:hover ul ul

{display: none;}

div#meny ul li:hover ul,

div#meny ul ul li:hover ul,

div#meny ul ul ul li:hover ul

{display: block;}

body {

behavior: url(csshover.htc);

}

Kan noen hjelpe meg her?

Endret 20. november 2007 av Lofnes

Stian Jacobsen · 20. november 2007

Fjern padding-top: 5px under #meny ul ul ul

Pilot_ · 20. november 2007

Ser fortsatt ikke ut til å fungere.

Link

Edit: problemer er at jeg har <li> i hovedknappene, og <li> i dropdown-menyen. Er ikke det noen mulighet for at jeg kan i padding i dropdown-menyen, uten at det går ut over den ordinære menyen?

Endret 20. november 2007 av Lofnes

Runar0 · 21. november 2007

#menu ul li ul li { padding-top: 0 }

Denne burde fungere fint.

Pilot_ · 21. november 2007

Nå la jeg til

#menu ul li ul li { padding-top: 0 }

og slik ser det ut:

#meny {
width: 100%;
float: left;
}

#meny ul {
font: 10px verdana;
background-image: url("DropDown.png");
background-repeat: x-repeat;
background-attachment: fixed;
list-style: none;
margin: 0;
padding: 0;
width: 151px;
float: left;
}

#meny a, #meny h2 {
display: block;
border: 0;
margin: 0;
}

#meny h2 {
font: 15px verdana;
color: #ffffff;
background-image: url("DropDownTopic.jpg");
width: 151px;
margin: 0;
padding-top: 7px;
padding-bottom: 7px;
text-align: center;
}

#meny p {
color: #ffffff;
text-decoration: none;
text-align: left;
}

#meny a:hover {
color: #eeeeee;
}

#meny li {
color: #ffffff;
position: relative;
text-align: left;
height: 22px;
padding-top: 0px;
margin: 0;
}

#menu ul li ul li { padding-top: 0 }

#meny ul ul ul {
position: absolute;
top: 0;
text-align: left;
left: 100%;
}

div#meny ul ul {
display: none;
}

div#meny ul li:hover ul { display: block; }

div#meny ul ul,
div#meny ul li:hover ul ul,
div#meny ul ul li:hover ul ul
{display: none;}

div#meny ul li:hover ul,
div#meny ul ul li:hover ul,
div#meny ul ul ul li:hover ul
{display: block;}

body {
behavior: url(csshover.htc);
}

<html>
<head>
<title>Brannvernservice.no</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all">
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}

#meny ul li {float: left; width: 100%;}
#meny ul li a {height: 1%;} 

#meny a, #meny h2 {
font: bold 10px/14px arial;
}
</style>
<![endif]-->
</head>

<body>

<div id="meny">
<ul>
<li><h2>Forside</h2>
</li>
</ul>

<ul>
<li><h2>Produkter</h2>
<ul>
<li>Brannslokking
<ul><li><a href="#">Test</a></ul>
<li>Evakuering
<ul><li><a href="#">Test</a></ul>
<li>Alarm
<ul><li><a href="#">Test</a></ul>
<li>Verneutstyr
<ul><li><a href="#">Test</a></ul>
<li>Slokkesystemer
<ul><li><a href="#">Test</a></ul>
<li>Pyroteknikk
<ul><li><a href="#">Test</a></ul>
<li>Spesialprodukter
<ul><li><a href="#">Test</a></ul>
</li>
</ul>
</li>
</ul>

<ul>
<li><h2>Tjenester</h2>
<ul>
<li><a href="#">Sertifisering</a>
<ul><li><a href="#">Test</a></ul>
<li><a href="#">Re-sertifisering</a>
<ul><li><a href="#">Test</a></ul>
<li><a href="#">Brannvernlederkurs</a>
<ul><li><a href="#">Test</a></ul>
<li><a href="#">Branndokumentasjon</a>
<ul><li><a href="#">Test</a></ul>
<li><a href="#">HMS oppbygging</a>
<ul><li><a href="#">Test</a></ul>
</ul>
</li>
</ul>

<ul>
<li><h2>Om oss</h2>
<ul>
<li><a href="#">Brannvernservice.no</a>
<ul><li><a href="#">Test</a></ul>
<li><a href="#">Samarbeidspartnere</a>
<ul><li><a href="#">Test</a></ul>
</ul>
</li>
</ul>

<ul>
<li><h2>Kontakt oss</h2>
<ul>
<li><a href="#">Avdeling Ålesund</a>
<li><a href="#">Avdeling Måløy</a>
<li><a href="#">Avdeling Florø</a>
</ul>
</li>
</ul>
</div>

</body>

</html>

Demo

Dropdown-menyen ser fortsatt ikke ut til å passe helt. :hmm:

hjahre · 21. november 2007

Jeg vil tro at dette funker bedre.

#menu ul li ul li { padding:12px 0 0 0;}

i steden for

#menu ul li ul li { padding-top:0px}

jeg ville tro det hvertfall, driver på med en dropdown-meny sjøl. Den har jeg forresten fått til å funke perfekt :new_woot:

Og sånn "by the way":

Dette er css-koden til menyen min:

#Menu {
display:block;
height:39px;
margin: 38px 0 0 0;
}

#Menu .MenuLeft {
display:block;

background:url(../images/MenuLeft.png) no-repeat;
margin:0 583px 0 0;

float:left;
width:15px;
height:39px;
}

#Menu .MenuRight {
display:block;

background:url(../images/MenuRight.png) no-repeat;
position:absolute;
margin: -39px 0 0 583px;

float:right;
width:17px;
height:39px;	
}

#Menu .MenuContainer {
display:block;
height:39px;
background:url(../images/MenuBackground.png) no-repeat;
margin: 0 17px 0 15px;
}

#Menu .MenuContainer a {
color:#FFFF00;
text-decoration:none;
}

#Menu .MenuContainer a:hover {
color:#FFFFFF;
}

#Menu .MenuContainer ul {
list-style-type:none;
position:absolute;
margin:8px 0 0 -5px;
}

#Menu .MenuContainer ul ul {
width:188px;
}

#Menu .MenuContainer li {
float:left;
position:relative;
padding: 0 4px 2px 4px;

border-left:#FFFF00 1px solid;
}

#Menu .MenuContainer li.first {
border:none;
}

#Menu .MenuContainer ul ul li {
float:left;
position:relative;
width:180px;
background:url(../images/SubmenuContent.png) repeat-y;
padding: 0 0 0 8px;
border:none;
}

#Menu .MenuContainer ul ul li.top {
height:3px;
background:url(../images/SubmenuTop.png) no-repeat;
}

#Menu .MenuContainer ul ul li.bottom {
height:15px;
background:url(../images/SubmenuBottom.png) no-repeat;
}

#Menu .MenuContainer a, .MenuContainer a:visited {
display:block;
}

#Menu .MenuContainer ul ul {
visibility:hidden;
position:absolute;
height:0;
left:3px;
top:0px;
width:188px;
padding:21px 0 0 0;
}

#Menu .MenuContainer ul li:hover ul,
#Menu .MenuContainer ul a:hover ul {
visibility:visible;
}

og dette er htmlkoden min for menyen:

   <div id="Menu">
   	<div class="MenuLeft"></div>

       <div class="MenuContainer">
       	<ul>
           	<li class="first"><a href="/hjem">Hjem</a></li>
               <li><a href="/innlegg">Innlegg</a>
               	<ul>
                   	<li class="top"> </li>
                   	<li><a href="/innlegg/nye">Nye innlegg</a></li>
                       <li><a href="/innlegg/arkiv">Arkiv...</a></li>
                       <li class="bottom"> </li>
                   </ul>
               </li>
             <li class="MenuItemLast"><a href="/diverse">Diverse</a>
               	<ul>
                   	<li class="top"> </li>
                   	<li><a href="/diverse/gjestebok">Gjestebok</a></li>
                       <li><a href="/diverse/kontakt">Kontakt</a></li>
                       <li class="bottom"> </li>
                   </ul>              
             </li>                
         </ul>
       </div>

resultatet kan sees her (http://hjahre.no-ip.org)

vil ikke anbefale å vise siden i noe annet enn Firefox eller Opera, for jeg har ikke lagd stilsett for IE enda.

Pilot_ · 21. november 2007

En dropdown uten bilder er enkelt, men når jeg skal legge inn bildene, blir det fort feil. Prøvde å legge til det du skrev, men fortsatt ingen forbedring.

hjahre · 21. november 2007

En dropdown uten bilder er enkelt, men når jeg skal legge inn bildene, blir det fort feil. Prøvde å legge til det du skrev, men fortsatt ingen forbedring.

Skal du ha linkene lenger ned?

Du kan jo prøve å legge til padding på linkene, eller bare posisjonere de sånn at de står litt lenger ned. Altså:

#meny a {
 margin:12px 0 0 0;
}

Det er verdt et forsøk

Pilot_ · 21. november 2007

Dessverre hjelp ikke det så mye det heller.

Klikk

hjahre · 21. november 2007

Dessverre hjelp ikke det så mye det heller.

Klikk

Da får du prøve med padding i a, ser du har brukt det på h2 og det funker bra jeg skjønner ikke annet enn at det skal funke i a også.

#meny a {
padding-top:12px;
}

Pilot_ · 21. november 2007

Problemer er at når jeg angir <li> og <a> så vil noe være midtstilt og noe være sentrert. For eksempel, så vil jeg at en link på dropdownen skal være venstrestilt, mens den store knappen med "forside" skal være midtstilt. Føler det blir vanskelig å løse.

Padding på <a> fungerte heller ikke.

funkyboy · 22. november 2007

Sjekk ut Stu Nicholl`s dropdownmenyer. http://www.cssplay.co.uk/

Disse bruker å være svært gode, og er alltid testet skikkelig.

Pilot_ · 22. november 2007

Nå tror jeg at jeg begynner å få til menyen, men hvordan skal det gjøres med tanke på at menyen skal gå over innholdet under, isteden for at menyen dytter innholdet nedover? Er z-index riktig løsning?

Pilot_ · 27. november 2007

Da har jeg prøvd på nytt, og det ser litt bedre ut nå. Men har fortsatt et lite problem. Jeg får ikke til de rutene som skal gå ut til høyre for dropdownen.

Link

Pilot_ · 28. november 2007

Noen som kan hjelpe meg?

Logg inn

Problemer med dropdown-meny

Anbefalte innlegg

Pilot_

Videoannonse

Stian Jacobsen

Pilot_

Runar0

Pilot_

hjahre

Pilot_

hjahre

Pilot_

hjahre

Pilot_

funkyboy

Pilot_

Pilot_

Pilot_

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer