Drie niveaus in Suckerfish werken niet

Pagina: 1
Acties:

  • Matthijs1982
  • Registratie: Augustus 2005
  • Laatst online: 02-06-2021
ik heb een suckerfish menu met drie niveau's. Dit werkt allemaal prima, behalve het derde submenu. deze staat rechtsonder in de hoek van het tweede submenu.
Ik heb alle stappen opgevolgd op de website van Sons of Suckerfish, HTML Box.

Weet iemand hoe ik het derde menu naast het tweede menu krijg?
Ook werkt dit niet in firefox. Daar staat het derde menu, gewoon onder het tweede menu.

Ik gebruik onderstaande CSS voor het derde submenu:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#nav li ul ul {
position: absolute;
width: 90px;
height: 15px;
left: -999em;
background: #e871b0;
color: #FFFFFF;
font-family: Times New Roman, Verdana, Helvetic Sans-serif;
font-size: 9px;
margin: -1em 0 0 10em;
}

/* aanpassingen subsubmenu: */

#nav li li ul ul a {
background: #d8127b;
color: #FFFFFF;
font-family: Times New Roman, Verdana, Helvetic Sans-serif;
font-size: 11px;
}

#nav li li ul ul a:hover {
background: #e871b0;
color: #FFFFFF;
font-family: Times New Roman, Verdana, Helvetic Sans-serif;
font-size: 11px;
}

  • Geert.H
  • Registratie: Maart 2001
  • Laatst online: 13-02 22:17
Heb je iets meer info? Een voorbeeld? Wat heb je al geprobeerd? Want hier kunnen wij ook niets. Geef eens een link waar het staat.

  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

Even wat op- en aanmerkingen; als jouw font-family, font-size en color overal dezelfde waarden hebben is het handig om die globaal ergens te declareren, ipv ze per onderdeeltje te herhalen omdat dit je css nogal onoverzichtelijk maakt.

Verder geheel met Ghoekzema eens, zonder een voorbeeld pagina en op zijn minst je html en de rest van je css komen we nergens.

  • Matthijs1982
  • Registratie: Augustus 2005
  • Laatst online: 02-06-2021
ik heb een div menu genaamd met daarin het suckerfish menu. Ik heb 9 menu items in de hoofdnavigatie.
de breedte van de div is 780 pixels. Nu wil ik mijn menu's een breedte meegeven.
Wanneer ik 780/9 = 86 pixels instel, is het menu te groot.
Is het ook mogelijk om de menu's zo in te stellen, dat deze zich automatisch aan de tekst in het menu aanpast? Want als de tekst langer is dan de breedte die ik aangeef in de css, gaat de tekst buiten het menu item lopen.

Weet iemand hoe ik dit moet instellen?

Onderstaand mijn CSS.

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
#nav, #nav ul { /* all lists */
    padding: 0;
    height: 2em;
    margin: 0;
    list-style: none;
    line-height: 1;
}

#nav a {
    display: block;
    width: 10em;
}

#nav li { /* all list items */
    float: left;
    width: 10em; /* width needed or else Opera goes nuts */
}

#nav li ul { /* second-level lists */
    position: absolute;
    background: orange;
    width: 10em;
    left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li ul ul { /* third-and-above-level lists */
    margin: -1em 0 0 10em;
}

#nav li:hover ul ul, #nav li.sfhover ul ul {
    left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
    left: auto;
}
#menu {
position: absolute;
top: 132px;
left: 0px;
text-decoration: none;
z-index: 1;
}

  • crisp
  • Registratie: Februari 2000
  • Laatst online: 19:39

crisp

Devver

Pixelated

Matthijs: je vraag over de breedtes van je menu-items past prima in dit topic, derhalve heb ik de 2 topics met elkaar gemerged.
Ook hier geldt echter dat een online voorbeeld meer zegt dan enkel een stukje uit je CSS...

Intentionally left blank