Dropdown menu hovers over the main menu

[Anonymous]

Website: http://homeplantscare.offersite.info

Second menu title from the left, when I hover over the menu it appears over the main menu and not beneath.

#suckerfishnav {
    background:#6E9F1F url("../multi-level-navigation-plugin/images/suckerfish_green.png") repeat-x;
    font-size:18px;
    font-family:verdana,sans-serif;
    font-weight:bold;
    width:100%;
    }
#suckerfishnav, #suckerfishnav ul {
z-index:1000;
    float:right;
    list-style:none;
    line-height:25px;
    padding:0;
    border:1px solid #aaa;
    margin:0;
    width:100%;
    }
#suckerfishnav a {
    display:block;
    color:#dddddd;
    text-decoration:none;
    padding:0px 10px;
    }
#suckerfishnav li {
    float:right;
    padding:0;
    }
#suckerfishnav ul {
z-index:1000;
    position:absolute;
    left:-999em;
    height:auto;
    width:151px;
    font-weight:normal;
    margin:0;
    line-height:1;
    border:0;
    border-top:1px solid #666666;
    }
#suckerfishnav li li {
    width:149px;
    border-bottom:1px solid #666666;
    border-left:1px solid #666666;
    border-right:1px solid #666666;
    font-weight:bold;
    font-family:verdana,sans-serif;
    }
#suckerfishnav li li a {
    padding:4px 10px;
    width:130px;
    font-size:12px;
    color:#dddddd;
    }
#suckerfishnav li ul ul {
    margin:-21px 0 0 150px;
    }
#suckerfishnav li li:hover {
    background:#6E9F1F;
    }
#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:#dddddd;
    }
#suckerfishnav li:hover a, #suckerfishnav li.hover a {
    color:#dddddd;
    }
#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:#dddddd;
    }
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.hover ul ul, #suckerfishnav li.hover ul ul ul, #suckerfishnav li.hover 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.hover ul, #suckerfishnav li li.hover ul, #suckerfishnav li li li.hover ul, #suckerfishnav li li li li.hover ul {
    left:auto;
    background:#444444;
    }
#suckerfishnav li:hover, #suckerfishnav li.hover {
    background:#9DDD35;
    }

[imported_Ryan]

It looks beneath to me. Perhaps this is a browser specific issue?

[Anonymous]

I have the same problem. The drop-down menu just hovers over the main menu.

It must be said I’ve made quite a few changes to the css, but I don’t really have much css knowledge (a bad combination perhaps?)
Are you able to spot my problem?

Also, the whole top menu bar is placed slightly to the right of the center, is that also because of something in the css?

CSS:

#suckerfishnav {
width: 910px;
margin: 20px 50px 0 0;
height: 50px;
background: url("../multi-level-navigation-plugin/images/img03.gif") no-repeat left top;
border: none;
}

#suckerfishnav, #suckerfishnav ul {
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#suckerfishnav a {
display: block;
float: left;
margin-right: 1px;
padding: 20px 15px 15px 15px;
text-decoration: none;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;

#suckerfishnav a:hover {
background: #AA330F url(images/img04.gif) repeat-x;
color: #FFFFFF;
}

#suckerfishnav .current_page_item a {
background: #AA330F url(images/img04.gif) repeat-x;
color: #000000;
}

#suckerfishnav li {
  float:left;
  padding:0px 0px 20px 0px;
  padding-left:10px;
  padding-right:10px;
}

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

#suckerfishnav li li {
    font-weight:bold;
    font-family:arial,verdana,sans-serif;
    }
#suckerfishnav li li a {
    padding:0 0;
    width:80px;
    font-size:12px;
    color:#FFFFFF;
    }
#suckerfishnav li ul ul {
    margin:0 0 0 0px;
    }
#suckerfishnav li li:hover {
    background:#AA330F;
    }
#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:#FFFFFF;
    }
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
    color:#FFFFFF;
    }
#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:#FFFFFF;
    }
#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:#CC0000;
    }
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
    background:#AA330F;
    }

[imported_Ryan]

Sorry Hawks, but no one can help without seeing your page first.

[Anonymous]

Yeah, sorry about that. Because the menu kinda made my site look like crap, I just reverted to my old (non-multi-level) menu. But i managed to fix the problem. Now, however, I have the problem of the dropdown menu being shifted one block to the right in IE versions 7 and earlier.

My site is http://www.liverpoolblogg.no[/url:1s6c48ap%5D

[imported_Ryan]

Stab in the dark guess to potentially fix it … perhaps try removing the following HTML:
[quote:r8amcgmy]
<div id="menu"> [/quote:r8amcgmy]

[Anonymous]

I had the same problem.  It was caused by there being navigation menu options defined in the theme CSS file as well as the navigation menu’s on CSS code.

More specifically it was float:left in themes CSS the code:

#NaviBar ul a {
color:#ffffff;
display:block;
[b:ho0q0218]float:left;[/b:ho0q0218]
margin:0;
padding:7px 15px 6px 15px;
text-decoration:none;
font-weight: bold;
}

Once I removed all the code from the Theme css to do with navigation bars it worked fine

[imported_Ryan]

Glad to hear you got your problem fixed PoD ” title=”Smiley” />

[Author]

Posts