Superfish Menu - Last Child Item Not Aligning With Parent Menu Item

HTML & CSS
1

If you go here and hover Practices>Estate Planning>10 Reasons…

You’ll notice that the background arrow image is a little low–I can’t seem to find a way to move it without it disappearing!

Also, the “10 Reasons…” line item is below where I would like for it to be. I would like for it to appear right next to it’s parent item, Estate Planning, but not sure where to find the area to fix that (obviously in the superfish.css, but I’m rather confused as to WHERE to edit the positioning of this item).

A fresh set of eyes would be greatly appreciated! Thank you!

2

The sub menus arrow can be controlled from here:


a > .sf-sub-indicator {  
    top:            1em;/*  [B]top level[/B]*/
    background-position: 0 -100px; 
}

[B]ul li a > .sf-sub-indicator{top:.5em;}/* this would be the second level*/ [/B]
3

I think you meant:

ul li ul li a > .sf-sub-indicator{top:.5em;}/* this would be the second level*/

for the second level. I was wondering why BOTH sub-indicators were moving at the same time.

Also, my third tier isn’t aligning right next to ‘Estate Planning’, unless I hover over it and then I lose it!!! Argh!

4

Hi,

Yes sorry, I types it out too quickly without thinking - but you worked it out anyway :slight_smile:

The top position is set by this extra rule that you have here:


.moduletablemainmenu ul.menu li:hover ul, .moduletablemainmenu li.sfHover ul {
    top: 2.8em;
}

That is over-riding the other suprfish styles so you will need to use the same format to over-ride it.


.moduletablemainmenu ul.menu li li:hover ul, 
.moduletablemainmenu li li.sfHover ul {
[B]    top: 0;
    left:12em
}[/B]

I’m not sure why the menu moves down when you mouse out though. Seems to be a conflict somewhere.

Actually you may need to do this for the rest of the items as well.


.moduletablemainmenu .sf-menu li:hover ul,
.moduletablemainmenu .sf-menu li.sfHover ul {
    left:            0;
    /*top:            2.5em;  match top ul list item height */
    z-index:        1001;/*99*/
}
.moduletablemainmenu ul.sf-menu li:hover li ul,
.moduletablemainmenu ul.sf-menu li.sfHover li ul {
    top:            -999em;
}
.moduletablemainmenu ul.sf-menu li li:hover ul,
.moduletablemainmenu ul.sf-menu li li.sfHover ul {
    left:            12em; /* match ul width */
    top:            0;
}
.moduletablemainmenu ul.sf-menu li li:hover li ul,
.moduletablemainmenu ul.sf-menu li li.sfHover li ul {
    top:            -999em;
}
.moduletablemainmenu ul.sf-menu li li li:hover ul,
.moduletablemainmenu ul.sf-menu li li li.sfHover ul {
    left:            12em; /* match ul width */
    top:            0;
}

It seems you are defining styles after the original and giving them more weight making this more complicated.

5

It’s just like me to do that.

I’ve managed to fix it, somewhat (different browsers issues), but I also noticed on my home page nav that after hovering over ‘Contact’, the contact hover background does not completely cover the background image of the container. I currently have the menu items widths in ems, but when I converted to pixels, the menu items wrapped underneath eachother.

6

… and this is why I don’t use javascripted nonsense for menus unless it’s a behavior file for IE6… ESPECIALLY anything that has some goofy animooted garbage that just gets in the users way.

My advice, throw superfish in the trash, write the menu without the animooted manure and just have it appear using CSS… throwing something like csshover3.htc at it for IE6- if you still care about it.

Of course, I’d also axe the giant annoying animated banner flash that pushes anything resembling content clear off the screen (especially given how badly the site breaks when plugins are disabled AND that it’s preventing the menu from working in IE at all), and swing a giant Orcish axe at the 200k of javascript for NOTHING.

Fixed metric fonts, fixed width layout, transparencies and serif fonts making text hard to read, heading colors below accessibility minimums, tables for layout, multiple div, classes and ID’s for nothing, content heading orders that make no sense whatsoever, XML prolog forcing IE into quirks mode, jquery bloat for nothing, … it’s 253k not counting the banner images to deliver less than 1k of actual content on the page – /FAIL/ hard.

Perfect example of EVERYTHING wrong with web development today. When you’ve got 12k of markup for less than 1k of plaintext, something is horribly wrong with the page. Horribly wrong as in 3k of markup before you even open the body tag… horribly wrong as in 9 separrate javscripts totalling over 200k… horribly wrong as in linking in multiple conflicting versions of the same script or MULTIPLE toolkits like jquery and mootools for no reason…