menu dropdown displays behing content

[Anonymous]

I have searched this forum for a couple of days and still can’t seem to fix the problem.

I have the menu within div id=menu tags.  I have tried z-index stuff.

When I put menu on its own with the exact css from the css genrator site everything works fine.  But I wanted it centered and fixed within the page.  Thats when I started having problems.

Here’s the site http://www.heatheressianportraitarts.com

Here’s css:

#suckerfishnav {
    background:#223E52 url("../multi-level-navigation-plugin/images/suckerfish_blue.png") repeat-x;
    font-size:15px;
    font-family:helvetica,sans-serif;
    font-weight:normal;
    width:960px;
   
    }
#suckerfishnav, #suckerfishnav ul {
    float:center;
    list-style:none;
    padding:0;
    margin:0;
    z-index:1000;
    }
#suckerfishnav a {
    display:block;
    color:#868686;
    text-decoration:none;
    padding:0px 10px;
    }
#suckerfishnav li {
    float:left;
    padding:0;
    }
#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 {
    width:99px;
    border-bottom:1px solid #666666;
    border-left:1px solid #666666;
    border-right:1px solid #666666;
    font-weight:bold;
    font-family:helvetica,sans-serif;
    }
#suckerfishnav li li a {
    padding:4px 10px;
    width:80px;
    font-size:14px;
    color:#868686;
    }
#suckerfishnav li ul ul {
    margin:-23px 0 0 100px;
    }
#suckerfishnav li li:hover {
    background:#223E52;
    }
#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:#944F85;
    }
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
    color:#944F85;
    }
#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:#868686;
    }
#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:#223E52;
    }
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
    background:#223E52;
    }

Here’s #menu css:

#menu {
background-color: #223e52;
        background-image: url(http://heatheressianportraitarts.com/blog/nav_bg.gif) repeat;
        filter:alpha(opacity=90);-moz-opacity:.90;opacity:.90;
height:2em;     
        width: 960px;
        margin-bottom: 1px;
        margin-top: 1px;
        border-left: 1px solid #223E53;
border-right: 1px solid #223E53;
   
}

#menu ul {
width: 920px;
margin: 0 auto;
padding: 0;
left: 0;
list-style: none;
       
}

HEre is part of header.php:

<div id="menu">
<?php if (function_exists(‘pixopoint_menu’)) {pixopoint_menu();} ?>
</div>

thanks

[imported_Ryan]

You don’t need to do anything with #menu. You just need to set margin:0 auto on the #suckerfishnav and it should center itself.

[Anonymous]

Its centered but the dropdown goes behind content

[imported_Ryan]

There is such thing as float:center;. Floats can only be left or right.

Your menu seems to be missing their backgrounds. Have you perhaps removed them from the CSS? It’s hard to see if they’ve above the content or not when they have no background.

[Anonymous]

Hi everyone!

I had the same problem. The menu was hiding behind content, but as soon as i saw your discussion, i manage to solve the problem. I saw the z-index:1000; that you have in your code:
#suckerfishnav, #suckerfishnav ul {
    float:center;
    list-style:none;
    padding:0;
    margin:0;
    z-index:1000;
    }
so i put it in my drop down code in the same exact spot and worked. Thanks very much.

I have to say that this is a great plug in and i thank everyone that worked for it.

[imported_Ryan]

Thanks for the kind words Panagiotis and glad to hear you got it working ” title=”Smiley” />

[Anonymous]

That worked for me too. Thanks.

[imported_Ryan]

Good to hear it worked for you Geoff ” title=”Smiley” />

[Author]

Posts