Struggling with positioning absolute divs is a common challenge for many of us. In my case, it's horizontal sub-menus with the following CSS:
ul.children{
display:none;
position:absolute;
}
ul.children li{
position:relative;
height:60px;
float:none;
}
li.page_item_has_children:hover > ul.children{
display:inline;
}
The issue I'm facing is that the entire submenu shifts to the left by 50% of the parent's width... I've tried various solutions but seem to have only made things worse xD
If anyone has any tips or can assist me with this problem, I would greatly appreciate it :)
Here is the HTML structure:
<li class="page_item page-item-2 page_item_has_children">
<a href="url">About</a>
<ul class='children'>
<li class="page_item page-item-39">
<a href="url">About</a></li>
<li class="page_item page-item-41">
<a href="url">Contact us</a></li>
</ul>
</li>
Unfortunately, I am unable to modify the HTML as it is part of a WordPress theme :S