Avatar billede natsprinter Nybegynder
05. marts 2012 - 14:43 Der er 6 kommentarer og
1 løsning

Påvirk parent element i en css menu

Jeg sidder og roder med noget CSS og mangler en guide til at påvirke øverste element fra underliggende elementer.

Altså forstået på den måde, at når jeg bevæger ned i drop-down delen, så skal hoved-menu-punktet kunne påvirkes. I nedenstående eksempel, "slukker" øverst element når jeg bevæger mig ned i menuen.

se: http://schubertsminde.dk/_ny/indhold.asp?id=32

Her er min css-kode:


.layout_01 #menu {
    height:32px;
    width:1000px;
    background:#FFF;
    border-bottom:1px solid #000;
    float:left;

}

.layout_01 #menu .afstand {
    padding-left:260px;
}

.layout_01 #menu ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-variant:small-caps;
  font-weight:bold;
}

.layout_01 #menu ul li {
  display: block;
  position:static;
  float: left;
}

.layout_01 #menu li ul { display: none; }

/* Her sætter jeg layout for menupunkter på topniveau */
.layout_01 #menu ul li a {
  display: block;
  text-decoration: none;
  color: #000;
  padding: 9px 8px 8px 8px;
  white-space: nowrap;
}

/* Her sætter jeg layout for menupunkter på undermenuer */
.layout_01 #menu ul li ul li a {
  color:#FFF;
  font-size:14px;
  padding: 5px 8px 5px 8px;
}

/* Her sætter jeg layout for det valgte menupunkt */
.layout_01 #menu ul li .aktiv {
    background: #9d333f;
    color:#FFF;
}

/* Her sætter jeg layout for mouse-over på topniveau */
.layout_01 #menu ul li a:hover {
    color:#009CDD;
    text-decoration:underline;
}

.layout_01 #menu li:hover ul {
  display: block;
  position: absolute;
}

.layout_01 #menu li:hover li {
  float: none;
  font-size: 12px;
  z-index:99;
}

/*Her sætter jeg baggrundsfarve på den aktive dropdownmenu*/
.layout_01 #menu li:hover li a {
    background-image:url(../grafik/layout/menu_drop_bg.png);
    border-bottom:1px solid #000;
    border-left:1px solid #000;
    border-right:1px solid #000;
    color:#FFF;
    font-weight:bold;
    }

/*Her sætter jeg baggrundsfarve på det aktive menupunkt i dropdown*/
.layout_01 #menu li li a:hover{
    border-bottom:1px solid #000;
    background: #00354e }

.layout_01 #menu .bund{
    border-bottom:1px solid #FFF;
    }
Avatar billede stenger Nybegynder
06. marts 2012 - 10:53 #1
Så vidt jeg ved findes der ikke nogen parent selectors i CSS.

Hvordan laver du din menu? Er det statisk HTML, en XSLT menu eller hvordan?

På en eller anden måde skal du ihvertfald f.eks. have sat class="active" på moder-elementet og så ramme den class via CSS, eftersom der som sagt ikke findes nogen pålidelige parent selectors.

Men nogen må selvfølgelig gerne fortælle mig noget andet, ville da hjælpe meget :)
Avatar billede natsprinter Nybegynder
06. marts 2012 - 11:06 #2
Det er helt simpel HTML. Jeg kan godt li' at gøre det så enkelt som muligt, så kan alle være med :-D

Det der pusler mig her er, at jeg gerne vil ha topmenuen til at forblive aktiv når jeg bevæger mig ned i undermenuen. Selve menuen er sat op som en liste:

<ul>
<li><a href='index.asp?id=0'>Forsiden</a></li>
<li><a href='indhold.asp?id=1'>Behandlingshjemmet</a>
<ul>
<li><a href='hjemmet_aktiviteter.asp?id=0'>Aktivitetskalender</a></li>
<li><a href='indhold.asp?id=9'>Behandlingsmetoder</a></li>
<li><a href='indhold.asp?id=7'>Beliggenhed</a></li>
<li><a href='indhold.asp?id=8'>Ejerforhold</a></li>
<li><a href='indhold.asp?id=18'>Ergoterapi</a></li>
<li><a href='indhold.asp?id=13'>Fælles aktiviteter</a></li>
<li><a href='ledigplads_liste.asp?id=0'>Ledige pladser</a></li>
<li><a href='indhold.asp?id=31'>Liv og glade dage</a></li>
<li><a href='indhold.asp?id=12'>Målgruppe</a></li>
<li><a href='indhold.asp?id=32'>Praktikstedsbeskrivelse</a></li>
<li><a href='indhold.asp?id=19'>Ridning</a></li>
<li><a href='hjemmet_meninger.asp?id=0'>Sladderhanken</a></li>
<li><a href='indhold.asp?id=10'>Trinmodel</a></li>
<li><a href='indhold.asp?id=33'>Udredning</a></li>
</ul>
</li>

<li><a href='indhold.asp?id=30'>Afdelinger</a>
<ul>
<li><a href='indhold.asp?id=3'>Fjordli</a></li>
<li><a href='indhold.asp?id=4'>Horisonten</a></li>
<li><a href='indhold.asp?id=22'>Hovedafdeling</a></li>
<li><a href='indhold.asp?id=5'>Kløvhøj</a></li>
<li><a href='indhold.asp?id=6'>Skolegang</a></li>
<li><a href='indhold.asp?id=2'>Solskifte</a></li>
</ul>
</li>

<li><a href='indhold.asp?id=14'>Historien</a>
<ul>
<li><a href='indhold.asp?id=15'>Artikler og udklip</a></li>
<li><a href='indhold.asp?id=11'>Jubilæumsskrift</a></li>
<li><a href='indhold.asp?id=16'>Musikken</a></li>
</ul>
</li>

<li><a href='galleri.asp?id=1'>Galleri</a></li>

<li><a href='indhold.asp?id=24'>Xtra-ydelser</a>
<ul>
<li><a href='indhold.asp?id=28'>Aflastning i koloni</a></li>
<li><a href='indhold.asp?id=29'>Diverse</a></li>
<li><a href='indhold.asp?id=27'>Overvåget samvær</a></li>
<li><a href='indhold.asp?id=26'>Unge i ungdomsbolig</a></li>
</ul>
</li>

<li><a href='kontakt.asp?id=0'>Kontakt</a></li>
<li><a href='links.asp?id=0'>Links</a></li>
<li><a href='faq.asp?id=0'>FAQ</a></li>
</ul>

Denne liste er så indeholdt i en div med id='menu'

Thats it
Avatar billede NielsErikP Mester
07. marts 2012 - 10:34 #3
Hej...

Jamen er det så ikke bare at skrive sådan i din Css :



#menu li:hover {
    background: // En eller anden farve kode.
}



Ved ikke helt om det er det du mener med Aktiv, når du bevæger dig ned i menu'en ....
Håber du kan bruge det :-)
Avatar billede Slettet bruger
07. marts 2012 - 14:01 #4
Prøv og ændre din CSS fra
#menu ul li a:hover {
til
#menu ul li:hover a {
Avatar billede NielsErikP Mester
07. marts 2012 - 22:54 #5
Hej...

#3:  Ej, det var forkert da det jo ikke er selve den unordered liste du har givet id'en menu, men din div , så prøv :


#menu ul li:hover {
    background: // En eller anden farve kode:
}

Avatar billede natsprinter Nybegynder
18. juni 2012 - 19:17 #6
NielsErikP - gav mig løsningen !
Avatar billede NielsErikP Mester
18. juni 2012 - 23:09 #7
Hej...

Det glæder mig... Den var lidt lang tid undervejs og så giver du dig selv pointene.. Hmmm!!!!
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