It currently displays like that because it is relative to the li
element. You will need to make it relative to the div.child
element or like that.
For your code add position:static
to your .leftMenu ul li .pchild li
. Something like this:
.leftMenu ul li .pchild li {
position:static
}
That is, in your style.css
at line 140
.
Update:
For your second question in the comments you will have 2 options:
- use a jQuery plugin like
hoverIntent
or one of the many menu plugins that work like a charm on all platforms - write your css like this:
Add this new style:
.leftMenu ul li div.post{
position: absolute;
top: 0px;
left: 175px;
z-index: 10;
width: 413px;
height: 100%;
display: none;
}
.leftMenu ul li .pchild li:hover .post {
display: block;
}
Remove:
padding-left: 20px;
display: none;
position: absolute;
.leftMenu ul li .pchild li:hover .childpost {
display: block;
}
from .leftMenu ul li .pchild li .childpost
Change your padding
values like this on .leftMenu .child
padding: 0 24px 0 0!important;