Question

Menu works in all major browsers but it’s looking different in IE7. See screen shots below.
Check demo at http://jsfiddle.net/FQLdm/6/

When you hover your mouse over the home link, you will see a submenu. In IE7, both the menu button and submenu are pushed up.

This happened when i replaced this

.menu1 ul.menu li{
    position: relative;
    list-style-type: none;
    display:block;
    float:left;
}

with this (I need to use this way inline-block to center the list items)

.menu1 ul.menu li{
    position: relative;
    list-style-type: none;
    display:inline;
    display:inline-block;
    *display:inline; /*IE7*/
    *zoom:1; /*IE7*/
}

In Chrome it looks fine

In IE7 it looks different. Note how the home button is raised up. it should look like the chrome screenshot above.

Answer 1

Write vertical-align:middle in your li. Like this:

.menu1 ul.menu li{
  vertical-align:middle;
  position: relative;
  list-style-type: none;
    display:inline;
    display:inline-block;
    *display:inline; /*IE7*/
    *zoom:1; /*IE7*/

}