drop down too far to the left

[sbs]

I love the multi-navigation level plugin and have implemented this on my website.  I am new to CSS but have been able to make most of the changes necessary for my website. 

However, the one thing I can’t seem to figure out is how to get the dropdown to move over to the right.  Currently, the drop down box seems to start too far to the left, and I would instead like it to start right where the parent box starts.

You can see what I’m talking about (in case I am not explaining it well) at:
http://www.selenashelley.com if you go to the "Groups & Workshops" tab.

Can you tell me what code I would need to change to move it over?

Thanks,
Selena

[imported_Ryan]

The following would would work if you have the top level menu item positioned as relative or absolute:
[code:2071mich]#suckerfishnav ul {left:100px;}[/code:2071mich]

[Anonymous]

Thanks for the quick response!  I couldn’t get it to work (tried changing the "left:-999em" to "left: 100px" and that didn’t work; then tried a few other things that I thought might help).  I figured maybe if I sent you the code (below) you could see where the problem is.  Let me know if you have another suggestion, and if not it’s not the end of the world!

Thanks again,
Selena

#suckerfishnav {
    background:#FDB12D repeat-x;
    font-size:11px;
    font-family:georgia;
    font-weight:bold;
    width:100%;
    text-transform: uppercase;
    }
#suckerfishnav, #suckerfishnav ul {
    float:left;
    list-style:none;
    line-height:30px;
    padding:0;
    border:1px solid #aaa;
    margin:0;
    width:100%;
    }
#suckerfishnav a {
    display:block;
    color:#ffffff;
    text-decoration:none;
    padding:0px 10px;
    }
#suckerfishnav li {
    float:left;
    padding:0;
    }
#suckerfishnav ul {
    position:absolute;
    left:-999em;
    height:auto;
    width:121px;
    font-weight:normal;
    margin:0;
    line-height:1;
    border:0;
    border-top:1px solid #666666;
    }
#suckerfishnav li li {
    width:120px;
    border-bottom:1px solid #666666;
    border-left:1px solid #666666;
    border-right:1px solid #666666;
    font-weight:bold;
    font-family:georgia;
    }
#suckerfishnav li li a {
    padding:4px 10px;
    width:100px;
    font-size:10.5px;
    color:#ffffff;
    text-transform:capitalize;
    }
#suckerfishnav li ul ul {
    margin:0px 0 0 121px;
    }
#suckerfishnav li li:hover {
    background:#FDB12D;
    }
#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:#000000;
    }
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
    color:#000000;
    }
#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:#FDB12D;
    }
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
    background:#FDB12D;
    }

[imported_Ryan]

"Selena" wrote:

… tried changing the "left:-999em" to "left: 100px"

Nope, it’s the left:auto you need to change. the -999em is what pushes it off-screen until you hover over it, so changing it to 100px would make it appear all the time.

Try this … (which includes the change to 100px)

"Selena" wrote:

#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:100px;
    background:#FDB12D;
    }

Obviously, you would want to change the 100px to whatever value suited the positioning you want. 100px was just an arbitrary value I chose.

[Anonymous]

Thanks Ryan!  Really appreciate your help! ” title=”Smiley” />

[imported_Ryan]

No problem, happy to help ” title=”Smiley” />

[Author]

Posts