[CSS] Dropdown-menu sluit niet goed aan

[Verwijderd]

Goedendag, ik heb sinds een paar jaar een dropdown menu van APY.com op mijn website en deze bevalt zeer goed.
Nu wil een regel toevoegen aan het submenu en daar gaat het dan fout.
Als ik bv onder Europa iets wil toevoegen sluit het submenu niet meer aan op het hoofdmenu.
het is misschien het duidelijkst als je de website bezoekt en dan met de muis op Europa en daarna op een ander continent.

Ik heb een minimale basis kennis van CSS en daarom vraag ik het hier.



voor alle duidelijkheid zal ik ook mijn url erbij plaatsen: www.johnvanzon.com


ik denk dat de foto genoeg zegt wat het probleem is: nl het submenu is niet lang genoeg.

Ik weet niet hoe ik de CSS hier kan plaatsen die erbij hoort, maar als iemand mij wil helpen hoor ik het graag.

John

[ Voor 14% gewijzigd door Verwijderd op 05-09-2015 16:25 ]

[Verwijderd]

Hier de css van menu:

#menu {
position:relative;
height:50px;
background:url(images/menu.png) repeat-x 0 center;
}
#menu .menu {
left:27px;
position:absolute;
top: -20px;
}
#menu * {
list-style:none;
border:0;
padding:0;
margin:0;
}
#menu a {
display:block;
padding-left:5px;
}
#menu a span {
display:block;
padding:30px 33px 37px 2px;
white-space:nowrap;
}
#menu li {
float:left;
background:url(images/pix.gif);
}
#menu li li { float:none; }
#menu div {
display:none;
position:absolute;
background:url(images/pix.gif);
margin-top:-35px;
width:200px;
}
#menu div ul { position:relative; }
#menu div div {
margin:-50px 0 0 -9px;
left:100%;
}
#menu li:hover>div { display:block; }

/** ie7 */
*:first-child+html #menu div div { display:block; top:-9999px; }
*:first-child+html #menu li:hover>div { top:auto; }

#menu div.columns { width:200px; }
#menu div.columns ul {
float:left;
width:200px;
position:static;
}
#menu div.columns a { white-space:normal; }
#menu div.two { width:400px; }
#menu div.two ul.one div { margin-left:-209px; }
#menu div.two ul.one div div,
#menu div.two ul.two div { margin-left:-9px; }
#menu div.three { width:600px; }
#menu div.three ul.one div { margin-left:-409px; }
#menu div.three ul.two div { margin-left:-209px; }
#menu div.three ul.one div div,
#menu div.three ul.two div div,
#menu div.three ul.three div { margin-left:-9px; }
#menu div.four { width:800px; }
#menu div.four ul.one div { margin-left:-609px; }
#menu div.four ul.two div { margin-left:-409px; }
#menu div.four ul.three div { margin-left:-209px; }
#menu div.four ul.one div div,
#menu div.four ul.two div div,
#menu div.four ul.three div div,
#menu div.four ul.four div { margin-left:-9px; }
#menu div.five { width:1000px; }
#menu div.five ul.one div { margin-left:-809px; }
#menu div.five ul.two div { margin-left:-609px; }
#menu div.five ul.three div { margin-left:-409px; }
#menu div.five ul.four div { margin-left:-209px; }
#menu div.five ul.one div div,
#menu div.five ul.two div div,
#menu div.five ul.three div div,
#menu div.five ul.four div div,
#menu div.five ul.five div { margin-left:-9px; }

#menu a, #menu a span {
font-family:'Trebuchet MS', Tahoma, Arial;
font-size:16px;
line-height:24px;
color:#fff;
text-decoration:none;
font-weight:normal;
}
#menu a {
text-shadow:rgb(64,49,25) -0px -0px 0;
background:url(images/item.png) no-repeat left -546px;
}
#menu a span { background:url(images/item.png) no-repeat right 0; }
#menu li.current>a { background-position:left -637px; }
#menu li.current>a span { background-position:right -182px; }
#menu a.parent span {
background-position:right -91px;
padding-right:60px;
}
#menu li.current>a.parent span { background-position:right -273px; }
#menu>ul>li:hover>a, #menu a:hover { background-position:left -637px; }
#menu>ul>li:hover>a span, #menu a:hover span { background-position:right -182px; }
#menu>ul>li:hover>a.parent span, #menu a.parent:hover span {
background-position:right -455px;
}

#menu div a {
margin-left:4px;
padding:4px 0 0 0;
width:190px;
background:url(images/subitem.png) no-repeat 0 top;
text-shadow:#111 -0px -0px 0;
}
#menu div a span {
font-size:14px;
background:url(images/subitem.png) no-repeat -384px bottom;
padding:3px 14px 10px 11px;
white-space:normal;
color:rgb(195,191,183);
}
#menu div a:hover,
#menu div ul>li:hover>a.parent, #menu div ul li a.parent:hover {
background-position:-192px top;
}
#menu div a:hover span {
color:#fff;
background-position:-768px bottom;
}
#menu div a.parent span { background-position:-576px bottom; }
#menu div ul>li:hover>a.parent span, #menu div ul li a.parent:hover span {
color:#fff;
background-position:-960px bottom;
}

#menu div {
background:url(images/columns.png) no-repeat -200px -14px;
padding-top:14px;
}
#menu div ul {
width:200px;
background:url(images/columns.png) no-repeat 0 bottom;
padding-top:11px;
padding-bottom:17px;
}
#menu div div { background-position:-200px top; }
#menu div div ul { padding-top:0; }

#menu div.columns {
padding-top:0;
margin-top:-21px;
}
#menu div div.columns { margin-top:-36px; }
#menu div.columns>ul {
padding-top:25px;
margin-top:-14px;
}
#menu div.two { background-position:-1000px bottom; }
#menu div.three { background-position:-1400px bottom; }
#menu div.four { background-position:-2000px bottom; }
#menu div.five { background-position:-2800px bottom; }
#menu div.columns ul.two,
#menu div.columns ul.three,
#menu div.columns ul.four,
#menu div.columns ul.five { background-position:-550px -14px; }
#menu div.columns ul.one { background-position:-400px -14px; }
#menu div.two ul.two,
#menu div.three ul.three,
#menu div.four ul.four,
#menu div.five ul.five { background-position:-800px -14px; }

#menu div.columns>ul>li>a {
margin-left:0;
width:200px;
}
#menu div.columns>ul.one>li>a {
margin-left:4px;
width:194px;
}
#menu div.two>ul.two>li>a,
#menu div.three>ul.three>li>a,
#menu div.four>ul.four>li>a,
#menu div.five>ul.five>li>a {
width:194px;
}

#menu.active a {
z-index:780;
position:relative;
}
#menu.active li { z-index:778; }
#menu.active div div { z-index:781; }
#menu.active div a { position:static; }

#menu.active li.back {
background:url(images/item.png) no-repeat left -637px;
height:91px;
position:absolute;
padding:0;
margin:0;
}
#menu.active li.back .left {
display:block;
padding:0;
width:auto;
background:url(images/item.png) no-repeat right -182px;
height:91px;
margin:0 5px 0 28px;
position:relative;
left:5px;

}
#menu.active li.current-back, #menu.active li.current-parent-back { background-position:left -637px; }
#menu.active li.current-back .left { background-position:right -182px; }
#menu.active li.current-parent-back .left { background-position:right -182px; }

#menu.active .spanbox {
position:absolute;
display:none;
background:url(images/pix.gif);
margin-top:-21px;
width:200px;
}
#menu.active div {
margin-top:-14px;
display:block;
position:relative;
}
#menu.active div .spanbox {
margin:0 0 0 -6px;
left:100%;
}
#menu.active .spanbox .spanbox { margin-top:-50px; }
#menu.active .spanbox .spanbox div { margin:0; }

/** ie7 */
*:first-child+html #menu.active div div { top:auto; }
*:first-child+html .menu-images-preloading { visibility:hidden; }

#menu.active div.two ul.one .spanbox { margin-left:-206px; }
#menu.active div.two ul.one .spanbox .spanbox,
#menu.active div.two ul.two .spanbox { margin-left:-6px; }
#menu.active div.three ul.one .spanbox { margin-left:-406px; }
#menu.active div.three ul.two .spanbox { margin-left:-206px; }
#menu.active div.three ul.one .spanbox .spanbox,
#menu.active div.three ul.two .spanbox .spanbox,
#menu.active div.three ul.three .spanbox { margin-left:-6px; }
#menu.active div.four ul.one .spanbox { margin-left:-606px; }
#menu.active div.four ul.two .spanbox { margin-left:-406px; }
#menu.active div.four ul.three .spanbox { margin-left:-206px; }
#menu.active div.four ul.one .spanbox .spanbox,
#menu.active div.four ul.two .spanbox .spanbox,
#menu.active div.four ul.three .spanbox .spanbox,
#menu.active div.four ul.four .spanbox { margin-left:-6px; }
#menu.active div.five ul.one .spanbox { margin-left:-806px; }
#menu.active div.five ul.two .spanbox { margin-left:-606px; }
#menu.active div.five ul.three .spanbox { margin-left:-406px; }
#menu.active div.five ul.four .spanbox { margin-left:-206px; }
#menu.active div.five ul.one .spanbox .spanbox,
#menu.active div.five ul.two .spanbox .spanbox,
#menu.active div.five ul.three .spanbox .spanbox,
#menu.active div.five ul.four .spanbox .spanbox,
#menu.active div.five ul.five .spanbox { margin-left:-6px; }
#menu.active div.columns ul .spanbox div { margin-left:0; }
#menu.active div.two,
#menu.active div.three,
#menu.active div.four,
#menu.active div.five { padding-bottom:14px; }

.menu-images-preloading,
.menu-images-preloading div {
top:0;
left:0;
width:4px;
height:2px;
opacity:0.1;
overflow:hidden;
position:absolute;
}
.menu-images-preloading { width:2px; }
.menu-images-preloading .columns-png { background:url(images/columns.png) no-repeat; }
.menu-images-preloading .subitem-png { background:url(images/subitem.png) no-repeat; }

[Gooly]

Qua functioneren werkt het allemaal prima. Op zich sluit het submenu prima aan, het is alleen de achtergrond styling die niet klopt.
En dat zit in de achtergrond definiering van #menu div ul (Het was even zoeken)
Zie ook deze screen

Daar zie je dat als ik de achtergrond declaratie in #menu div ul uit zet, en ik maak zelf een nieuwe achtergrond declaratie, dat het dan prima werkt. (Ik heb hem groen gemaakt om goed op te vallen)

[Verwijderd]

Hallo Gooly, dank je wel voor je bericht.
Ik ga wat proberen en uit te vinden hoe ik dit kan aanpassen, ben namelijk niet zo goed met css....

Wordt vervolgd....

[TI_Observer]

site laadt uberhaupt niet

[Verwijderd]

nee ik merk het nu ook. wat kan dit nu zijn? server down?

[Demonitzu]

Volgens www.web-sniffer.net verwijst je site door (met een 302 redirect) naar johnvanzon.com/WkOMK/ en die URL verwijst weer door (met ook een 302 redirect) naar johnvanzon.com/QoQgK/WkOMK/

Heb je iets aan je .htaccess bestand veranderd?

[Gooly]

Verwijderd schreef op zondag 06 september 2015 @ 12:38:
Hallo Gooly, dank je wel voor je bericht.
Ik ga wat proberen en uit te vinden hoe ik dit kan aanpassen, ben namelijk niet zo goed met css....

Wordt vervolgd....

Ik doe het in de screen met ul.one maar uiteraard kun je ook/beter de selector van de stylesheet aanhouden; #menu div ul

Overigens gebruik ik zelf nooit shorthand CSS voor achtergronden (vooral meer een persoonlijke voorkeur dan een best practice)
Dus ik zou dan gebruiken:

code:

background-image: url('images/columns.png');
background-repeat: no-repeat;
background-position: bottom;

En terwijl ik dat zo typ, besef ik me dat het best eens zo zou kunnen zijn dat je achtergronafbeelding (images/columns.png) tekort schiet. Lees: niet hoog genoeg is.
Althans, als ik zie dat de achtergrond niet herhaald, en naar de onderkant van het element (het submenu) wordt gedirigeerd, dan kan ik me voorstellen dat het niet hoog genoeg is en de bovenkant van de achtergrondafbeelding niet hoog genoeg is voor het (hoger geworden) submenu.

[Verwijderd]

Toshin schreef op zondag 06 september 2015 @ 13:00:
Volgens www.web-sniffer.net verwijst je site door (met een 302 redirect) naar johnvanzon.com/WkOMK/ en die URL verwijst weer door (met ook een 302 redirect) naar johnvanzon.com/QoQgK/WkOMK/

Heb je iets aan je .htaccess bestand veranderd?

Ik zou niet weten wat je bedoelt maar ik heb niets veranderd.
Anyway hij doet het weer.......

Bedankt iig voor je reactie

[Verwijderd]

Gooly schreef op zondag 06 september 2015 @ 16:14:
[...]

Ik doe het in de screen met ul.one maar uiteraard kun je ook/beter de selector van de stylesheet aanhouden; #menu div ul

Overigens gebruik ik zelf nooit shorthand CSS voor achtergronden (vooral meer een persoonlijke voorkeur dan een best practice)
Dus ik zou dan gebruiken:

code:

background-image: url('images/columns.png');
background-repeat: no-repeat;
background-position: bottom;

En terwijl ik dat zo typ, besef ik me dat het best eens zo zou kunnen zijn dat je achtergronafbeelding (images/columns.png) tekort schiet. Lees: niet hoog genoeg is.
Althans, als ik zie dat de achtergrond niet herhaald, en naar de onderkant van het element (het submenu) wordt gedirigeerd, dan kan ik me voorstellen dat het niet hoog genoeg is en de bovenkant van de achtergrondafbeelding niet hoog genoeg is voor het (hoger geworden) submenu.

Bedankt Gooly,

Ik heb het aangepast en is inderdaad beter zo, sluit nog niet helemaal aan, maar hier is mee te leven.
Maar als ik er weer een item bij plaats in bv Europa dan sluit het weer niet goed aan.........

[Verwijderd]

Gooly,

ik van diverse dingen geprobeerd, ik heb als laatste de colums.png groter gemaakt en nu is het wel correct.
alleen mis ik aan de rechter zijkant het schaduw effect, maar dat is niet heel erg.

Bedankt voor alle hulp...

John

[Gooly]

Graag gedaan.
Het probleem is inderdaad enigszins structureel. Het gevolg van een "niet-zo-handige" structuur van het submenu. Je blijft het probleem tegenkomen, elke keer als je weer een nieuw submenu-item toevoegd.
Dat komt omdat de achtergrond in/op de unordered list (het submenu zelf) wordt toegepast en niet op het list item (het submenu item).
Het dubmenu zelf (UL) weet immers niet hoeveel 'kinderen' (LI's) hij later eventueel gaat krijgen, dus in de CSS gaat men uit van een vast aantal subsub menu items (LI's). Wordt dat aantal anders dan de vooraf genomen aanname, dan gaat het fout.

Meer concreet:

Huidige situatie:

code:

<ul class"submenu_achtergrond">
    <li>sub menu item</li>
    <li>sub menu item</li>
    <li>sub menu item</li>
</ul>

Betere situatie:

code:

<ul>
    <li class"submenu_item_achtergrond">sub menu item</li>
    <li class"submenu_item_achtergrond">sub menu item</li>
    <li class"submenu_item_achtergrond">sub menu item</li>
</ul>

De afgeronde onderkant zit 'm dan in:
submenu_item_achtergrond:last-child

Op die manier kan je oneindig submenu items toe blijven voegen.

[Gooly]

PS
Om de achtergrond declaratie van het submenu naar de submenu items te verplaatsen, dien je eerst de achtergrond van het submenu zelf te resetten (op '0' te zetten)

code:

{
    background-image: none;
    background-color:transparent;
}

en vervolgens die van de submenu items te declareren:

code:

background-image: url:('images/jenieuweachtergrondvoorsubmenuitems.png');
-webkit-box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow:    2px 0px 2px 0px rgba(0, 0, 0, 0.75);
box-shadow:         2px 0px 2px 0px rgba(0, 0, 0, 0.75);

op submenu:last-child:

code:

background-image: url:('images/jenieuweachtergrondvoorhetlaatstesubmenuitem.png');
-webkit-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow:    2px 2px 2px 0px rgba(0, 0, 0, 0.75);
box-shadow:         2px 2px 2px 0px rgba(0, 0, 0, 0.75);

[Verwijderd]

Gooly schreef op zondag 06 september 2015 @ 18:48:
PS
Om de achtergrond declaratie van het submenu naar de submenu items te verplaatsen, dien je eerst de achtergrond van het submenu zelf te resetten (op '0' te zetten)

code:

{
    background-image: none;
    background-color:transparent;
}

en vervolgens die van de submenu items te declareren:

code:

background-image: url:('images/jenieuweachtergrondvoorsubmenuitems.png');
-webkit-box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow:    2px 0px 2px 0px rgba(0, 0, 0, 0.75);
box-shadow:         2px 0px 2px 0px rgba(0, 0, 0, 0.75);

op submenu:last-child:

code:

background-image: url:('images/jenieuweachtergrondvoorhetlaatstesubmenuitem.png');
-webkit-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow:    2px 2px 2px 0px rgba(0, 0, 0, 0.75);
box-shadow:         2px 2px 2px 0px rgba(0, 0, 0, 0.75);

phoei, dat gaat mij allemaal even te ver, maar misschien ga ik er ooit nog induiken hoe het allemaal werkt.

maar moet ik nu nog iets aanpassen? (even voor controle)

[Gooly]

Dit was een meer structurele oplossing. Maar ik denk als je de huidige achtergrondafbeelding een stuk hoger maakt, dan kan je voorlopig weer vooruit met de submenu items

[Verwijderd]

denk ik ook. nogmaals bedankt voor je hulp/