Dropdown menu blogspot - HJÄLP!
Jag försöker få till en bra dropdown-meny men det går inte, allt som visas är en enda underkategori, resten försvinner.
Hur har ni gjort?
Så här ser det ut just nu -www.sandravictoria.se
Har du kodningen så jag kan se vad du gör för fel?
Vänliga hälsningar Jessica
medarbetare på socialt stöd & Anhöriga
Jag har gått in på 'layout' och sen lagt till en HTML/Javascript-gadget
där finns den här koden:
CSS ligger i en annan fil för just CSS-koder
och ser ut så här:
#dropdown {
float: left;
margin: 0;
padding: 0;
}
#dropdown li {
background: #fffff;
border:1px solid #fffff;
float: left;
list-style: none;
margin: 0;
padding:0 0 10px;
position: relative;
height:67px;
width:240px;
}
#dropdown li:hover {
background: #fff;
}
#dropdown li a {
text-decoration:none;
}
#dropdown ul {
background: #fff;
display: none;
margin: 0;
padding: 0;
position: absolute;
top: 40px;
left: -1px;
z-index: 500;
}
#dropdown ul {
position: absolute;
}
#dropdown li:hover ul {
display: block;
Ser ut som att du gör samma fel som jag gjorde fast jag har ett konto på blogg.se så vet inte om det fungerar likadant. Ser varför det inte fungerar du har ju inga överrubriker. jag använder denna kod för överrubrik
**där det står # skriver du adressen och där det står länk 2-2 skriver du namnet på länken :) hoppas du förstår.
**
Vänliga hälsningar Jessica
medarbetare på socialt stöd & Anhöriga
Jag ser till skillnad från Jesse inga som helst fel i din HTML. Du har gjort helt rätt. Om du gör som Jesse skriver får du ju bara en vanlig lista helt utan underrubriker.
Felet ligger alltså i din CSS. Kikar på den och återkommer!
Hur har det gått? lyckades du med koden jag gav dig?
Vänliga hälsningar Jessica
medarbetare på socialt stöd & Anhöriga
Hela din CSS är lite plottrig. (Det är dock inte i det urklipp du har postat här själva problemet ligger). Du har en del onödiga saker som du kan ta bort. Börja med att rensa upp det hela lite. Testa att skriva om all CSS för dropdownen. Börja med huvudfunktionen, som ska se ut såhär:
#dropdown ul {
display: none;
}
Detta innebär att dina underrubriker (ul) inte syns om man inte gör något.
#dropdown li:hover ul {
display: block;
}
Detta innebär att när vi hovrar över li (alltså huvudrubriken) visas ul (underrubrikerna). Börja med att få detta att fungera och styla det sedan.
Själva problemet du har tror jag beror på att någon div runt menyn (du har otroligt många divar där, en upprensning hade behövts då alla inte verkar fylla en funktion) har en fast höjd (height) som är för liten. Alltså ryms inte hela din dropdown-meny. Wordpress har lagt till "overflow:hidden" till #dropdown, då det normalt sett inte ska gå att saker visas ovanpå något annat. Det du behöver göra är att lägga till detta:
#dropdown {
overflow: visible;
}
#dropdown ul {
z-index: 500px;
position: absolute;
}
Overflow: visible gör så att saker som "sticker ut" visas, och z-index ser till så att det vi vill visa hamnar allra högst upp på sidan (tänk sidan som en hög OH-blad). Position:absolute måste vi ha för att z-index ska fungera.
#3 - Jag tror jag förstår vad du menar, gjorde så och la till två underrubriker till, Polen och indien, men de syns alltså inte när man drar med musen ovanför "Mina bilder" =/
#6 - Jag är inte säker på om jag gjorde rätt? Tog bort min css-mall och
la till:
#dropdown {
overflow: visible;
}
#dropdown ul {
z-index: 500px;
position: absolute;
}
Men nu kommer inte en enda underkategori fram, kan jag ha missuppfattat dig?
Vill för övrigt tacka er så mycket för hjälpen, det uppskattas mycket =)
Ett litet tillägg; alltså kategorierna finns där, men de vill inte synas, det är bara den första som gör det (om ni klickat in och sett vad jag menar) men resten kommer inte fram…
Både missuppfattning och jag som skrivit fel! Det ska bara stå z-index: 500, inte 500px. Det du lade till ordnar bara så att dina undermenyer ryms, inte att de faktiskt visas också! Prova detta (detta är alltså precis de sakerna som står i mitt inlägg ovan, fast sammansatta):
#dropdown {
overflow: visible;
}
#dropdown ul {
display: none;
z-index: 500;
position: absolute;
}
#dropdown li:hover ul {
display: block;
}
DET FUNKADE!!!!! 
Fast jag tänkte passa på och fråga en sak till,
har du möjligtvis någon aning om hur jag skulle kunna få
kategorierna att åka neråt istället för att lägga sig i
sidled? =)
Det beror på att Blogspot har lagt till float:left på allt. Du vill inte ha det här på dina underrubriker. För att ta bort det gör du såhär:
#dropdown ul li {
float:none;
}
Hmm. Det hjälpte inte, gjorde jag fel? Så här ser det ut i CSS-mallen nu;
#dropdown {
overflow: visible;
}
#dropdown ul {
float: none;
display: none;
z-index: 500;
position: absolute;
}
#dropdown li:hover ul {
display: block;
}
Jo det funkade visst! Jag läste igenom en gång till och provade igen
och nu fick jag till allting rätt ;
#dropdown ul li {
float:none;
}
#dropdown {
overflow: visible;
}
#dropdown ul {
float: none;
display: none;
z-index: 500;
position: absolute;
}
#dropdown li:hover ul {
display: block;
}
tack, tack, tack! =)
Jag tänkte fråga en sak till, jag hoppas det är okej; Själva mellanrummet
mellan rubrikerna på listan nedåt blir så stort, kan man åtgärda detta på något sätt? Är det krångligt och så, så gör det inget, jag är så himla nöjd ändå =)
Det är inte krångligt. Du ändrar paddingen.
#dropdown ul li a {
padding: 1px 10px;
}
1 px är uppe och nere, 10 px är åt sidorna. Du kan leka lite med olika siffror om du inte tyckte att dessa kändes rätt.
Det blev 5x7 =)
Tack så mycket för hjälpen, åter igen =)
Vart för övrigt inne och tittade på din blogg - gillar den!
Kul att du fick det att funka!
Min blogg är rätt död nu. Är nog ganska snart klar med min helt nya hemsida!
Såg det, fast jag gick bakåt en del =)
Det blir spännande, du. Så himla kul med ny design,
nästan som en nystart.
#18 din blogg blev riktigt fin :)
Vänliga hälsningar Jessica
medarbetare på socialt stöd & Anhöriga
Tack! =)
Håller med #19! 
# 21 - Tack så hemskt mycket =)
Starta ny diskussion