Wordpress submenu

[G.Scholtens]

Hallo,
Heb sinds gisteren een raar probleem met een website die ik aan het maken ben.

URL: rijschoolbulten.nl
Wordrpess 3.6.1
Theme: Twenty ten

Als ik een sub menu wil openen, heb ik de background over de hele menu breedte.
Dit omdat ik de postion rule heb verwijderd uit de style sheet bij #access ul ul a {
Als ik de rule toevoegd kan ik niks aan klikken van mijn submenu bij tarieven en examen info.

Hierbij de code van mijn style.css

[code=taal]
/* =Menu
-------------------------------------------------------------- */

#access {
background: #000;
display: block;
float: left;
margin: 0 auto;
width: 940px;
}
#access .menu-header,
div.menu {
font-size: 13px;
margin-left: 0px;
width: 928px;
}
#access .menu-header ul,
div.menu ul {
list-style: none;
margin: 0;
}
#access .menu-header li,
div.menu li {
float: left;

}
#access a {
color: #aaa;
display: block;
line-height: 30px;
padding: 0 15px;
text-decoration: none;
}
#access ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;

top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 2;
}
#access ul ul li {
min-width: 180px;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #333;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
background: #333;
color: #fff;
}
#access ul li:hover > ul {
display: block;
}
#access ul li.current_page_item > a,
#access ul li.current_page_ancestor > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
color: #fff;
}
* html #access ul li.current_page_item a,
* html #access ul li.current_page_ancestor a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
color: #fff;
}
[/code=taal]

[TheNephilim]

position: absolute; weer toevoegen en je menu voorzien van de juiste z-index gok ik zo.

[FotW]

TheNephilim schreef op dinsdag 08 oktober 2013 @ 16:46:
position: absolute; weer toevoegen en je menu voorzien van de juiste z-index gok ik zo.

Wat TheNephilim zegt + een position: relative; toevoegen op de bovenliggende li, dan zul je waarschijnlijk alleen de top van je absoluut gepositioneede element nog wat aan moeten passen.

[eXtreaL]

Klopt helemaal, dus:

#access .menu-header li,
div.menu li {
float: left;
position: relative;
}

#access ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 0;
left: 0;
float: left;
width: 180px;
z-index: 2;
}

[G.Scholtens]

Met de boven genoemde code word het alleen maar erger.

Heb nu de originele settings terug gezet, menu is weer goed.
Alleen bij het hover gedeelte van de muis over de sub items gaat het niet lekker.

Hierbij alsnog de code die ik gebruik voor mijn menu:
[code=taal]
/* =Menu
-------------------------------------------------------------- */

#access {
background: #000;
display: block;
float: left;
margin: 0 auto;
width: 940px;
}
#access .menu-header,
div.menu {
font-size: 13px;
margin-left: 0px;
width: 928px;
}
#access .menu-header ul,
div.menu ul {
list-style: none;
margin: 0;
}
#access .menu-header li,
div.menu li {
float: left;
position: relative;
}
#access a {
color: #aaa;
display: block;
line-height: 30px;
padding: 0 15px;
text-decoration: none;
}
#access ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}
#access ul ul li {
min-width: 180px;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #333;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
background: #333;
color: #fff;
}
#access ul li:hover > ul {
display: block;
}
#access ul li.current_page_item > a,
#access ul li.current_page_ancestor > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
color: #fff;
}
* html #access ul li.current_page_item a,
* html #access ul li.current_page_ancestor a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
color: #fff;

[/code=taal]

[ Voor 96% gewijzigd door G.Scholtens op 09-10-2013 11:33 ]

[FotW]

G.Scholtens schreef op woensdag 09 oktober 2013 @ 11:29:
Word er nog niet beter op, heb het nu neer gezet zoals hierboven aangegeven.
Word alleen maar erger

Zet je top eens op 100%, dus:

#access ul ul {
top: 100%;
}

[G.Scholtens]

FotW schreef op woensdag 09 oktober 2013 @ 11:34:
[...]


Zet je top eens op 100%, dus:

#access ul ul {
top: 100%;
}

Thnx dit was het. Problem solved