Dropdown menu not showing when using position: absolute;
- by Xiy
I've just turned my website into a responsive layout and along the way I've somehow managed to make my dropdown menus not work. When hovering over 'Drop-downs' they don't display unless I'm using position: relative. They worked before using position: absolute - but it seems they only work with position relative now. When using relative it uses the width which messes up the navigation bar.
Using relative: http://d.pr/i/tp5R
Using absolute: http://d.pr/i/j7r1
CSS for my sub-menu
div.left_first_header ul.sub-menu {
width: 125px;
top: 14px;
z-index: 2;
height: 100%;
position: absolute;
-webkit-border-radius: 0px 0px 4px 4px;
-moz-border-radius: 0px 0px 4px 4px;
background: url(images/drop_down_bg.jpg);
padding-left: 15px;
padding-right: 15px;
background-repeat: repeat;
}
jQuery for the drop down functionality
jQuery(document).ready(function ($) {
jQuery("ul.dropdown li").hover(function() {
$('ul:first',this).css('visibility', 'visible');
}, function() {
jQuery(this).removeClass("hover");
jQuery('ul:first',this).css('visibility', 'hidden');
});
});
My website
http://wpvault.com/kahlam/
Considering it's 4am I've probably made a really stupid simple mistake.
I apologise if I've missed anything.
