Vertical Sub List in Horizontal List Giving Alignment Problems

Question

I am facing a problem in creating a dropdown menu with images. I am trying to achieve a center aligned horizontal list with main menu items and corresponding vertical menus.

This is my CSS Code code:

#nav {
    position: relative;
    top: 88px;
    padding: 0px;
    border: 0px;
    min-width: 800px;
    z-index: 999;
    font-size: 0px;
}

#nav > ul {
    padding: 0;
}

#nav > ul > li {
    display: inline-block;
    padding: 0 0 0 0;
}

#nav >ul> li> ul {
    width: 100%;
    display: none;
    padding: 0px;
    margin: 0px;
    list-style: none;
}

#nav> ul >li >ul> li {
    display: block;
    padding: 0px;
}

JQuery Code:

$("#nav img").mouseover(function () {
  //$('ul .subList').hide();            
  var imgSrc = $(this).attr("src");
  var tempSrc = imgSrc.split(".png");
  var newSrc = tempSrc[0] + "Hover.png";
  $(this).attr("src", newSrc);
  $(this).closest('li').children('ul .subList').slideToggle();
});

Where nav is the div which contains the list. All the list items are images.

I want the main menu items to be aligned and the sub menu items to be displayed below the corresponding menu but the main menu item is going upwards.

Eg:

Should be: (Desired)

Item1 Item2 Sub1a Sub1b

Becomes: (Current output)

Item1 Sub1a Sub1b Item2

Could you create a jsfiddle of this? Kinda hard to visualise this :-) — Christian Jørgensen
Thanks Christian for the tip. Here is the jsFiddle: jsfiddle.net/rutagupta/PRGhj — newbie1985

Christian Jørgensen Christian Jørgensen · Accepted Answer · 2012-09-01T08:27:32

Aha, surprisingly easy fix this actually. It is one of these weird default things that happen with CSS.

To your #NAV > UL > LI

Add: vertical-align: top

You should always add vertical-align: top to inline-block elements, unless you wish for the opposite effect :-)

Vertical Sub List in Horizontal List Giving Alignment Problems

1 Answers