How to get the dropdown Box to be aligned perfectly with hovered over link

[BrianAdkins6300]

The website is http://www.thewafflecabin.com

If you look under Locations when it’s hovered over, the dropdown box flys down to the left a bit.  It’s positioned left relative to the "Locations" link.  I want  the box to be positioned exactly under Locations as if the dropdown box was positioned from the beginning right under the "L" of locations.  Where would I edit this in the CSS code?  Thanks guys.

-Brian 

[Anonymous]

I’m trying to get this done by tomorrow.  Does anyone have an idea of how to work on this positioning in the CSS? Thanks guys.

[imported_Ryan]

I suspect the styling from the following tag is causing the problem:
[code:1l7cjghx]<div class="menu"> [/code:1l7cjghx]

Perhaps try removing it or modifying .menu in the CSS to try to correct it.

[BrianAdkins6300]

Hi Ryan,

Even when I take out that Div Menu class you suggested, the dropdown still appears to the left of the "Locations" link.  The question is, how do I get these links left justified within the padding between links on the menu, rather than being in the center of the padding created between the links.

Here is the current CSS of the menu bar.  Let me know what could be done.  Thanks again.

#suckerfishnav {
    background:#e0dcc5 repeat-x;
    font-size:10px;
    font-family:Times New Roman,Verdana,sans-serif;
    font-weight:bold;
    width:99.8%;
    }
#suckerfishnav, #suckerfishnav ul {
    float:left;
    list-style:none;
    line-height:28px;
    padding:0;
    border:1px solid #aaa;
    margin:0;
    width:99.8%;
    }
#suckerfishnav a {
    display:block;
    color:##660000;
    text-decoration:none;
    padding:0px 39px;
    }
#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;
    z-index:1000
    }
#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:Times New Roman,verdana,sans-serif;
    }
#suckerfishnav li li a {
    padding:4px 10px;
    width:80px;
    font-size:14px;
    color:#dddddd;
    }
#suckerfishnav li ul ul {
    margin:-21px 0 0 100px;
    }
#suckerfishnav li li:hover {
    background:#9C1F1B;
    }
#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.sfhover a {
    color:##660000;
    }
#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:#660000;
    }
#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:#e0dcc5;
    }
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
    background:##999967;
    }

[imported_Ryan]

I can’t see anything wrong with your menu. When I remove all non-plugin supplied styling from it the menu still drops down to the left.

Did you perhaps change something in the CSS?

[BrianAdkins6300]

Hi Ryan,

Yeah, I know the drop downs drop to the left, but the drop down box below Location link is too far to the left of "Location" when you see it drop down.  I want it to dropdown right under the "L" in Location, not off to the left side of it.  I saw it more as a problem of being able to move the Location link over to the left within the "invisible" box that it’s in because of padding, rather than somehow moving the dropdown box over through some CSS coding.  Let me know if and where this is doable in the code.  Thanks Ryan.

[imported_Ryan]

Hi,
Are you certain you haven’t modified the CSS at all? It looks like it is shifted too far to the left even when all other styling is removed.

[BrianAdkins6300]

Hi Ryan, I got this email from the original theme designer.

"That’s suckerfish css, not mine.  Once you activated the plugin, that overrides my code.  You’ll have to go into the plugin files and deal with it there.  I don’t know anything about that plugin so I don’t know where to tell you to start, sorry."

Ugh.  I can’t figure this one out.  I’ve been trying to edit the code with the css for the theme and the suckerfish code.  If anyone else on here could help on this, I would greatly appreciate it. Thank you.

[imported_Ryan]

Hi,
I wasn’t asking about your themes CSS, I was asking if you had modified the CSS used in the plugin. If you haven’t modified the CSS then I’ll take a closer look for you, if you have, then just let me know what you changed and I can probably work out your problem from that.

[BrianAdkins6300]

Hi Ryan, I finally figured it out,

In the CSS part of the code that was

"#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;
    z-index:1000
    }",

I changed the margin to "margin: 0 0 0 28px;"

That 28 px pushed the box over 28 px from the left.  That is the specific place where you want to be in terms of how where you want the drop down boxes to be positioned.  I was changing the padding everywhere and getting nothing.  I thought it was a padding issue.  I’m telling ya, to this day I still get confused between margins and padding in style sheets.  Thanks Ryan for bearing with me through this all.  I really appreciate the plug and time you put into answering questions on the forum. 

BTW, did anyone ever figure out how to eliminate those white boxes in wordpress that appear under links when you hover over them?  I remember this being discussed in a previous post.  Thanks again Ryan.

[imported_Ryan]

Hi,
I assume by ‘white boxes’ you mean the title tags. And yep, there is  now an option in the admin  page for the plugin which allows you to remove them.

[BrianAdkins6300]

Ryan,

Is there a new version of the plugin where this option is available?  Or is it something I can find in the version 1.8.1 I have on now.  Thanks again

-Brian

[imported_Ryan]

This feature is available in the current version.

[Author]

Posts