Html 网页大小调整中断菜单项

我正在开发一个网站，问题是当我调整浏览器的大小（水平方向）时，菜单上的主页链接会被破坏。很难用语言来解释发生了什么，所以请在这里查看：

灰色背景是图像，具有右上角切割。在我切割该区域后，我使该区域透明。所以，它是透明背景上的梯形

---

我的问题是：在调整大小时，如何防止梯形变成矩形

如果你想要那样的东西。

如果菱形位于两个选项卡之间，则应为li元素（所有）指定特定的宽度。不要使用百分比。像这样

 .menu > li#home {
 display: inline;
 float: left;
 background: none;
 background-image: url(../img/home.png);
 width: 273px;   /* same as your image size */
 }

以及两个标题图像

img#logo {
position: absolute;
top: 10px;  /* Change it as it sets in the gap */
left: 250px; /* Change it as it sets in the gap */
width: 140px;
height: 90px;
}

---

不要使用图像，而是在文件中创建所需的形状。请尝试以下链接：

---

我不喜欢正在发生的事情。有些菜单项消失了。如果你把页面的html和css粘贴到这里，或者做一些修改。然后我可以解决这个问题。