Check out the menu at this link:
The issue lies with the dropdown functionality, which is a result of WordPress's auto-generated code.
Css:
.menu-tophorizontalmenu-container {
margin: 18px auto 21px;
overflow: hidden;
width: 1005px;
display: block;
}
.menu {
list-style: none;
margin: 0 auto;
padding: 0;
}
.menu * {
margin: 0;
padding: 0;
}
.menu a {
display: block;
color: #fff;
padding: 6px 16px;
background: #000;
}
.menu li {
position: relative;
float: left;
font-size: 18px;
margin: 2px 2px 0 0;
text-transform: uppercase;
}
.menu ul {
position: absolute;
top: 33px;
left: 0;
background: #000;
display: none;
list-style: none;
z-index: 999px;
}
.menu ul li {
position: relative;
display: block;
width: 257px;
margin: 0 0 2px 0;
padding: 0;
}
.menu ul li a {
display: block;
padding: 6px 16px;
color: #fff;
background: #000;
}
.menu ul li a:hover {
background: #1191B7;
color: #000;
}
.menu ul ul {
left: 257px;
top: 0;
}
.menu .menulink {
}
.menu .sub {
background: url(img/arrow-left.jpg) no-repeat 136px 8px;
}
If I remove the slideshow below the menu, it functions properly.
There is also JavaScript involved:
function mainmenu(){$(" #menu-tophorizontalmenu ul ").css({display: "none"}); // Opera Fix $(" #menu-tophorizontalmenu li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});} $(document).ready(function(){
mainmenu();});
Furthermore, there is an issue with the arrow placement... The arrow should only appear when there is a child menu present.
Any suggestions or solutions?