Dropdowns disapearing when trying to click

[Hermano]

Hi! The dropdown menu is working, but when moving the mouse to click just to click one of the dropdown links the menu disapears.  I’m not sure what could be happening.
This is the link
http://massauhaus.com/canales/

And this is the stlye.

Any help will be greatly apreciated. Thanks!

*** Main menu CSS code ***/
#suckerfishnav {
    background:#ccc ;
    font-size:13px;
    font-family:arial, helvetica,sans-serif;
    font-weight:bold;
    width:100%;
    }
#suckerfishnav, #suckerfishnav ul {
    float:left;
    list-style:none;
    line-height:20px;
    padding:0;
    border:1px solid #ccc;
    margin:0;
    width:100%;
    }

#suckerfishnav a {
    display:block;
    color:#fff;
    text-decoration:none;
    padding:4px 10px;
    }

#suckerfishnav li {
    float:left;
    padding:0;
    }

#suckerfishnav ul {
    position:absolute;
    left:-999em;
    height:auto;
    width:131px;
    font-weight:normal;
    margin:0;
    line-height:1;
    border:0;
    }

#suckerfishnav li li {
    width:131px;
    font-weight:normal;
    font-family:helvetica,arial,sans-serif;
    }

#suckerfishnav li li a {
    padding:3px 3px;
    width:131px;
    font-size:13px;
    color:#fff;
    }

#suckerfishnav li ul ul {
    margin:-20px 0 0 130px;
    }

#suckerfishnav li li:hover {
    background:#99CCFF;
    }
#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {
    color:#fff;
    }
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
    color:#fff;
    }
#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
    color:#fff;
    }
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
    left:-999em;
    }
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
    left:auto;
    background:#bbb;
    }
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
    background:#eee;
    }

[imported_Ryan]

I’m guessing the following tag is causing problems:
[code:5abtho19]<div class="grid_12" id="navegacion2"> [/code:5abtho19]
Try removing it (and it’s corresponding </div> tag and hopefully that will fix the problem. If not, then let me know and I’ll take a closer look for you.

[Hermano]

Thanks Ryan!
It’s that tag. I’ve removed it and works, but then I’ve just changed the css to give it’s right width and position and it stoped working again. That is what I’ve added:

#pixopoint_menu1 {
float:left;
width:700px;
}

or

#pixopoint_menu_wrapper1 {
float:left;
width:700px;
}

It’s clearly the float, because it works when removed. Why a float could be breaking it?

[Hermano]

It also happens when I remove those #pixopoint_menu styles of the last post and change the width in

#suckerfishnav {
    background:#ccc ;
    font-size:13px;
    font-family:arial, helvetica,sans-serif;
    font-weight:bold;
    width:700px;
    }
#suckerfishnav, #suckerfishnav ul {
    float:left;
    list-style:none;
    line-height:20px;
    padding:0;
    border:1px solid #ccc;
    margin:0;
    width:700px;
    }

[Hermano]

Solved. I’ve added a z-index:1 in
#suckerfishnav, #suckerfishnav ul

[imported_Ryan]

Glad to hear you got it working ” title=”Smiley” />

[Anonymous]

Hi Ryan,

Thanks for the great plugin. I’ve been working with it here: http://www.innerworldimages.com and it seems that I’m having the same problem described above. It worked great as the original suckerfish plugin but when I upgraded WP and installed the pixopoint everything kind of went nuts. Right now the drop downs are disappearing when you try to mouse over them. It seems the menu bar is a bit wider than is used to be. Any clues? Help is greatly appreciated.

PS I’m no CSS wiz if you couldn’t tell…

Thanks
Kat

PixoPoint 0.6.5
WP 2.8.4

#pixopoint_menu1 {
width:100%;
height:35px;
background:#00FF00 url("http://innerworldimages.com/Web/menuimg.jpg&quot;) repeat-x;
background-position:50% 0;
margin:0;}
#pixopoint_menu1 ul {
width:100%;
border:none;
background:none;
margin:0;
padding:0;
list-style:none;
}
#pixopoint_menu1 li {
border:none;
background:none;
background:##184D80 url("http://innerworldimages.com/Web/menuimg.jpg&quot;);
color:#999999;
line-height:35px;
z-index:20;
letter-spacing:0px;
background:;
font-weight:bold;
font-size:12px;
padding:0;
margin:0 0px;
;float:left;
font-family:tahoma,sans-serif;
position:relative;
}
#pixopoint_menu1 li:hover,#pixopoint_menu1 li.sfhover {
background:#0066CC url("http://innerworldimages.com/Web/menuimg.jpg&quot;);
background-position:0 60px;
}
#pixopoint_menu1 li a {
border:none;
background:none;
text-decoration:none;
display:block;
padding:0 10px;
color:#999999;
}
#pixopoint_menu1 li a:hover {
border:none;
background:none;
text-decoration:none;
color:#FFFFFF;
background-position:100% -120px;
}
#pixopoint_menu1 ul ul {
position:absolute;
left:-999em;
top:35px;
width:120px;
}
#pixopoint_menu1 li:hover ul,#pixopoint_menu1 li.sfhover ul {
left:auto;
}
#pixopoint_menu1 ul ul li a {
padding:4px 8px;
text-transform:normal;
font-variant:normal;
}
#pixopoint_menu1 ul ul li {
letter-spacing:0px;
color:#999999;
z-index:20;
width:120px;
font-family:tahoma,sans-serif;
font-size:11px;
font-weight:normal;
font-style:normal;
background:#184D80;
/*    border-bottom:1px solid #cccccc;
/* border-left:1px solid #cccccc;
/* border-right:1px solid #cccccc;
margin:0;
}
#pixopoint_menu1 ul ul li a {
line-height:22px;
color:#888888;
text-decoration:none;
        font-variant:small-caps
}
#pixopoint_menu1 ul ul li:hover a,#pixopoint_menu1 ul ul li.sfhover a {
color:#FFFFFF;
text-decoration:none;
}
#pixopoint_menu1 ul ul li:hover li a,#pixopoint_menu1 ul ul li.sfhover li a {
color:#888888;
}
#pixopoint_menu1 ul ul li:hover li a:hover,#pixopoint_menu1 ul ul li.sfhover li a:hover {
color:#FFFFFF;
}
#pixopoint_menu1 ul ul li:hover,#pixopoint_menu1 ul ul li.sfhover {
color:#FFFFFF;
background:#103355;
}
#pixopoint_menu1 ul ul ul li {
font-size:1em;}#pixopoint_menu1 ul ul ul, #pixopoint_menu1 ul ul ul ul {
position:absolute;
margin-left:-999em;
top:0;
width:120px;
}
#pixopoint_menu1 li li:hover ul,#pixopoint_menu1 li li.sfhover ul,#pixopoint_menu1 li li li:hover ul,#pixopoint_menu1 li li li.sfhover ul {
margin-left:120px;
}
#pixopoint_menu1 ul ul li:hover li a,#pixopoint_menu1 ul ul li.sfhover li a {
text-decoration:none;
}
#pixopoint_menu1 ul ul li li:hover a,#pixopoint_menu1 ul ul li li.sfhover a {
color:#FFFFFF;
text-decoration:none;
}
#pixopoint_menu1 li.pixo_search:hover {
background:none;
}
#pixopoint_menu1 li.pixo_search form {
margin:0;
padding:0;
}
#pixopoint_menu1 li.pixo_search input {
font-family:tahoma,sans-serif;}
#pixopoint_menu1 li.pixo_search input.pixo_inputsearch {
width:100px;
}
#pixopoint_menu1 li.pixo_right {
float:right;
}

[imported_Ryan]

I don’t think your problem is related to upgrading.

I’m guessing the following tag is probably causing you headaches, try removing that (and the corresponding closing tag) and hopefully that will help.
[code:3amiorng]<div id="menu">[/code:3amiorng]

[Anonymous]

Hi Ryan,

I tried deleting the tag and closing in the header template of my wordpress file and all that happened was the fonts changed. The drop down still did not function properly. Do you have any other ideas?

Thanks again for your help.
Kat

[imported_Ryan]

Oh, I can see why it happened after "upgrading". You didn’t move the CSS over from your old version and are using the new code so your original design was lost.

I’m not sure what your problem is from flicking through your code. If you sign up for premium support I would be happy to work it out for you, but it is look a little too time consuming to do for free sorry … https://geek.hellyer.kiwi/premium_support/

[Anonymous]

I have the same problem. Dropdowns seems doesn’t work in Firefox and IE 6.
My site is http://www.toyayatra.com
An enlightenment would be greatly appreciated ” title=”Cheesy” />

[imported_Ryan]

@edo – I can’t see any problems. It appears to be working fine in Firefox 3.5.

[Author]

Posts