flys horizontal?

[Anonymous]

Well I wanted my rop down menu to fly vertically down and then horizontal for the "grandchild" pages. instead first one drops down and then all the other "child pages" align horizontally next to the first. and when the "grandchild" page does drop down it is over the "child" page. Oh and I’m using the Multi-level navigation plus widget. Heres my code:

#suckerfishnav {
    background: url(http://realtortoolbelt.com/wp-content/u … bar-bg.gif);
    background-position:center top;

    background-repeat:no-repeat;
    font-size:12px;
    font-family:verdana,sans-serif;
    font-weight:none;
    height:35px;
    width:980px;
    }
#suckerfishnav, #suckerfishnav ul {
    float:left;
    list-style-type:none;
    line-height:35px;
    padding:0px 5px 5px 5px;
    border-right:1px solid #000000;
    border-left:1px solid #000000;
    border-bottom:1px solid #000000;   
    margin:0;
    width:100%;
    }
#suckerfishnav a {
    display:block;
    color:#ffffff;
    text-decoration:none;
    padding:0px 10px;
    }
#suckerfishnav li {
list-style-type:none;
    float:left;
    padding:0;
text-decoration:none;

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

        }
#suckerfishnav li li {
left:auto; 
width:auto;
        font-weight:none;
    font-family:verdana,sans-serif;
text-decoration:none;

    }
#suckerfishnav li li a {
    padding:4px 10px;
    width:130px;
    font-size:12px;
    color:#ffffff;
text-decoration:none;

    }
#suckerfishnav li ul ul {
    margin:-21px 0 0 150px;
text-decoration:none;

    }
#suckerfishnav li li:hover {
    background:#9C1F1B;
    text-decoration:underline;

   
}
#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;
text-decoration:underline;

    }
/* Keep */
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
    color:#ffffff;
text-decoration:underline;

    }

#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;
text-decoration:none;

    }
#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;
text-decoration:underline;

    }
#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:#9C1F1B;
text-decoration:underline;

    }
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
    background:#000000;
text-decoration:underline;

    }

[imported_Ryan]

Hi,
Sorry for the ridiculously long wait time before I have replied.

You probably have some wrapper HTML which is overlaying CSS onto the menu. If you remove that HTML code which is wrapped around the menu, you may be able to fix the problem.

[Author]

Posts