CSS菜单未正确对齐

我正在jquery mobile中设计一个移动应用程序。我正在尝试设计一个反应灵敏的菜单，但问题是当我的菜单内容超过一行时，它的行为会很奇怪。这是我想要什么和我得到什么的截图

这是我的样式表

<ul>
    <li><a href="about.html"><img src="images/icon1.png" border="0" alt="" title="">About</a></li>
    <li><a href="blog.html"><img src="images/icon2.png" border="0" alt="" title="">My blog &amp; Portfolio</a></li>
    <li><a href="gallery.html"><img src="images/icon3.png" border="0" alt="" title="">Photos</a></li>
</ul>

---

这里是JSFIDLE

您是否尝试过使用jquery移动网格布局，而不是尝试用自己的css定义布局？我的意思是：

还有一个如何使这些网格响应的指南

---

简单。只需添加一个

垂直对齐：top至
。菜单ul li

例如，

.menu ul li {
    background: url("images/icon_bg.png") no-repeat scroll center top transparent;
    display: inline-block;
    height: 125px;
    list-style: none outside none;
    margin: 0 6px 5px;
    vertical-align: top;
    width: 85px;
}

这里是
提供问题的JSFIDLE或live链接。@使用JSFIDLE网格更新的NathanLee不适用于我，因为我希望每个网格都能随屏幕宽度调整。所以有时候会有2/3菜单等。我不知道如何在网格中做到这一点。哦，男孩！你真是太棒了！谢谢你，内森。你救了我一天
.menu ul li {
    background: url("images/icon_bg.png") no-repeat scroll center top transparent;
    display: inline-block;
    height: 125px;
    list-style: none outside none;
    margin: 0 6px 5px;
    vertical-align: top;
    width: 85px;
}