Second level menu is permanently displaying on hover of first menu items

[demeter]

Hi there

My second level menu is permanently displaying now that I have implemented the code, when the first level menu items are hovered and displayed – weird.

Before I start posting my site information, is there anything you know that could be causing this?  I am certain it is something really simple that is causing it, but I cant work out what it is.

Thanks
D

[imported_Ryan]

No idea. It’s impossible to tell without seeing your site.

[demeter]

Okay, well here is my site URL:  http://www.newbodydiet.com. 

I am using the arthemia theme, but it’s not completed yet, still a lot more work to do on the site.

I am using the site as a CMS so using pages in the menu, rather than categories.

The menu item that has the second-level drop down which is problematic is "nutrition > amino acids"

I also tried to add another second-level menu item in "nutrition > minerals" to see if that would do anything to solve the problem, but it didnt (of course). All it did was to put that menu item in front of the amino acids!

[b:1nt4uph6]My CSS:[/b:1nt4uph6]
/* Dropdown Menus */
#page-bar li {
float: left;
margin: 0px;
padding: 0px;
}

#page-bar li li {
float: left;
margin: 0px;
padding: 0px;
width: 122px;
text-transform:none;
}

#page-bar li li a, #page-bar li li a:link, #page-bar li li a:visited {
background: #2B2B2B;
width: 122px;
float: none;
margin: 0px;
padding: 5px 10px 5px 18px;
border-top: 1px solid #C0C0C0;
}

#page-bar li li a:hover, #page-bar li li a:active {
background: #669999;
padding: 5px 10px 5px 18px;
}

#page-bar li ul {
position: absolute;
width: 10em;
left: -999em;
}

#page-bar li:hover ul {
left: auto;
display: block;
}

#page-bar li:hover ul, #page-bar li.sfhover ul {
left: auto;
}

[b:1nt4uph6]
PixoPoint Multi-level Navigation Menu CSS[/b:1nt4uph6]
#suckerfishnav {
    background:#2c2c2c repeat-x;
    font-family:helvetica,sans-serif;
    font-weight:bold;
    width:100%;
    }
#suckerfishnav, #suckerfishnav ul {
    float:left;
    list-style:none;
    line-height:12px;
    padding:0;
    margin:0;
    width:100%;
    }
#suckerfishnav a {
    display:block;
    color:#fff;
    margin: 0px;
    text-decoration:none;
    padding:10px 16px;
    }
#suckerfishnav li {
    float:left;
    padding:0;
    }
#suckerfishnav ul {
    position:absolute;
    left:-999em;
    width:auto;
    font-weight:normal;
    margin:0;
    border:0;
    line-height:12px;
    border-top:1px solid #2c2c2c ;
    }
#suckerfishnav li li {
    width:150px;
    float: left;
    margin: 0;
    padding: 0;
    border:1px solid #2c2c2c;
    text-transform:uppercase;
    font-weight:bold;
    font-family:helvetica,sans-serif;
    }
#suckerfishnav li li a {
    padding:5px 10px 5px 18px;
    width:122px;
    font-size:10px;
    color:#fff;
    background: #2c2c2c;
    }
#suckerfishnav li ul ul {
    margin:-25px 0 0 150px;
    }
#suckerfishnav li li:hover {
    background:#6699ff;
    }
#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:auto;
    }
#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:#2c2c2c;
    }
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
    background:#3c78a7;
    }

Hopefully you can point me in the right direction about this.

Thanks
D

[demeter]

PS, the other issue I am having is that the drop-down menu doesnt display in IE 6 at all.  That non-compliant browser!!

I did see the CDATA code, but I am not sure where I need to put it – is that all there is I need to do to make it work in IE6?

[imported_Ryan]

You need to remove the UL tags (id #page-bar) which you have wrapped around the menu. Hopefully that will fix your problem.
[code:2godqb6k]<div id="navbar" class="clearfloat">

<ul id="page-bar" class="left clearfloat">

<!–  Wont be using the extra home page – to enable site to be CMS-like –>
<!– <li><a href="http://www.newbodydiet.com/">Home</a></li> –>

<!– Multi-level Navigational Plugin by PixoPoint Web Development ... http://pixopoint.com/multi-level-navigation/ –>

<div id="pixopoint_menu_wrapper1"> [/code:2godqb6k]

The plugin automatically adds support for IE6 so you don’t need to add any code for it to work in that. However I suspect one of your other scripts in your site is messing up the jQuery plugin which adds support for IE6.

[demeter]

Unfortunately, that did not fix it – have a look at the page now (the second level menus are showing up vertically rather than horizontally)… did I maybe comment out the wrong thing?

http://www.newbodydiet.com

[imported_Ryan]

This is probably causing problems … <ul id="page-bar" class="left clearfloat">
And this may be causing problems … <div id="navbar" class="clearfloat">

[quote:1wgxz0a7]<div id="navbar" class="clearfloat">
<ul id="page-bar" class="left clearfloat">

<!–  Wont be using the extra home page – to enable site to be CMS-like –>
<!– <li><a href="http://www.newbodydiet.com/">Home</a></li&gt; –>

<!– Multi-level Navigational Plugin by PixoPoint Web Development … https://geek.hellyer.kiwi/multi-level-navigation/ –>

<div id="pixopoint_menu_wrapper1"> [/quote:1wgxz0a7]

[demeter]

Ryan

I removed <ul id="page-bar" class="left clearfloat">  and the corresponding </ul>, which is when the navigation menu showed the second-level menu items horizontally (instead of vertically).

The <div id="navbar" class="clearfloat"> is just the background for the navigation bar, with the rounded corners.

I just tried removing both the <ul> and the <div> which you pointed to above, but the only thing that happened was:
– rounded corners removed
– second level navigation menu items showing horizontally
– still not working properly…

I am thinking that the page-bar css has something to do with breaking the navigation menu.  When I made the menu in the auto-menu page you have for creating it, I have found that when I make changes to the suckerfish menu in my admin section of WordPress does not change certain things (ie background colour on hover), yet if I change them in the actual CSS (style.css) for page-bar, then the changes take effect.  I have tried to remove the page-bar css items from the style.css and relpace with the suckerfish menu css that was automatically generated, but that messes up the menu too (makes it show 2nd level menu items horizontally). 

So it seems that the theme is choosing to ignore some of the suckerfish menu items, which is what I think may be the problem…  I think there is some strange conflict going on…

Should I just add the suckerfish menu css code to my style sheet to see if that makes it work?

I have used the suckerfish menu before, without any problems, but it was on a site that I created without a CMS (not on WordPress either), so I am not sure what the issue is here…

[demeter]

I see when I checkout the plugin contents that you have a work-around for the IE6 problem…

It may be that I am using this theme as a CMS, which may conflict with some things….

[demeter]

I tried adding the suckerfish css to my style.css and of course it didnt change anything….

[imported_Ryan]

The following code is still there:
[code:3hhs31mu]<div id="navbar" class="clearfloat">
<ul id="page-bar" class="left clearfloat"> [/code:3hhs31mu]

If those tags are controlling anything in the menu then they need to be removed.

[imported_Ryan]

There is something majorly wrong with your CSS. You will need to either fix the problem (whatever it may be) or get some new CSS from the menu CSS generator … https://geek.hellyer.kiwi/suckerfish_css/

[imported_Ryan]

Sorry, I take that back. The CSS looks fine. I didn’t realise you didn’t want a dropdown but a horizontal slider instead.

Your main problem is that you have way too many menu items in your slider. When you jam that many menu items into the slider it floats the menu items down to the next line.

[demeter]

Thanks for the input Ryan

I am going to try to get the CSS again from the css generator because I changed it andIi think something I did may have caused the error, but not sure.

The css code I got was for (same as what is on the example):

1st level = drop down
2nd level = drop down

When I remove the following code it makes my menu turn into a horizontal slider, which is not what I want:
[code:t7cbrj2u]<div id="navbar" class="clearfloat">
<ul id="page-bar" class="left clearfloat">[/code:t7cbrj2u]

I will go back to the css menu generator and try again and get back to you

Cheers (from across the pond) ” title=”Smiley” />
D

[imported_Ryan]

We don’t provide free support for modified CSS as it is too time consuming.

[Author]

Posts