Drop down menu offset to the right

[Anonymous]

Two problems:

1) The line height of the dropdown menu bar is too wide. I want it to match the height of the original menu above it. My bet is that this is a simple change in the CSS code, but I’ve failed after trial-and error to shorten the height.

2) Initially, the dropdown menu text and background was offset to the right instead of appearing directly below the parent on the menu. I bet the cause is a <ul> or <li> tag, but I’m not totally sure which tags rule both the dropdown text as well as the background box and the 1 px borders.

I’m running the Multi-level Navigation Plugin Version 2.1.12 because it’s supposed to be compatible with my WordPress 2.8.4 installation.

Here’s the website:
http://spiritualdenver.com/?mln=on

Your dropdown menu is running below the standard theme’s menu. I’ve tweaked the CSS to match my color scheme and the horizontal padding (to fit the menu width). For testing, only the "About Us" page (so far) is a parent with children.

For your examination, here is the plugin’s appearance code:

#suckerfishnav {
    background:#000045 repeat-x;
    font-size:13px;
    font-family:verdana,sans-serif;
    font-weight:bold;
    width:100%;
    }
#suckerfishnav, #suckerfishnav ul {
    float:left;
    list-style:none;
    line-height:20px;
    padding:0;
    border:1px solid #aaa;
    margin:0;
    width:100%;
    }
#suckerfishnav a {
    display:block;
    color:#fff;
    text-decoration:none;
    padding:0px 3px;
    }
#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:verdana,sans-serif;
    }
#suckerfishnav li li a {
    padding:3px 3px;
    width:80px;
    font-size:13px;
    color:#fff;
    }
#suckerfishnav li ul ul {
    margin:-22px 0 0 100px;
    }
#suckerfishnav li li:hover {
    background:#00538A;
    }
#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:#fff;
    }
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
    color:#8CD1FD;
    }
#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:#fff;
    }
#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:#000045;
    }
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
    background:#00538A;
    }

THANKS FOR visiting my site and then telling me which code to change to get the straightline vertical effect I desire.

[imported_Ryan]

Hi,
I’m surprised it looks as good as it is actually as your HTML is totally borked.

You currently have something like this (with some list items in there as well):
[code:24fbb2qe]<ul>

<div id="pixopoint_menu_wrapper1">
<div id="pixopoint_menu1">
<ul class="sf-menu" id="suckerfishnav">
</ul>
</div>
</div>

</ul>
[/code:24fbb2qe]

Whereas you need something like this (ie: with no UL tag wrapped around the outside):
[code:24fbb2qe]
<div id="pixopoint_menu_wrapper1">
<div id="pixopoint_menu1">
<ul class="sf-menu" id="suckerfishnav">
</ul>
</div>
</div>

[/code:24fbb2qe]

[Author]

Posts